/* ═══════════════════════════════════════════════════════════════
   Visual System v1 — TwinMesh / Mirror
   System-first foundation layer.
   All pages inherit from this; no page-specific logic here.
   ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. TOKEN LAYER
   Canonical color / spacing / type tokens.
   These REPLACE the old :root vars for any page that opts in.
   ────────────────────────────────────────────────────────────── */

:root {
  /* ── Background layer ── */
  --vs-bg-0: #0E1116;            /* main background */
  --vs-bg-1: #131821;            /* secondary / deep surface */
  --vs-bg-2: #161A22;            /* strong container fill */

  /* ── Structure line layer (1px default) ── */
  --vs-line-0: rgba(240,243,246, 0.08);   /*极弱 */
  --vs-line-1: rgba(240,243,246, 0.14);   /* 常规 */
  --vs-line-2: rgba(240,243,246, 0.22);   /* 强 */

  /* ── Text layer ── */
  --vs-text-0: #F0F3F6;          /* 主标题 / 主判断 */
  --vs-text-1: #B8C0CC;          /* 次级正文 / 展开层 */
  --vs-text-2: #6B7280;          /* 元信息 / 弱标签 */

  /* ── Accent: 钛灰蓝 — scarce calibration / activation color ── */
  --vs-accent: #647B91;

  /* ── Spacing (8pt base, inherited) ── */
  --vs-sp-1:  4px;
  --vs-sp-2:  8px;
  --vs-sp-3: 12px;
  --vs-sp-4: 16px;
  --vs-sp-5: 20px;
  --vs-sp-6: 24px;
  --vs-sp-8: 32px;
  --vs-sp-10: 40px;
  --vs-sp-12: 48px;
  --vs-sp-16: 64px;

  /* ── Hairline helper ── */
  --vs-hairline: 1px;

  /* ── Radius (restrained) ── */
  --vs-r-sm: 4px;
  --vs-r-md: 6px;

  /* ── Mark dimensions ── */
  --vs-mark-w: 10px;
  --vs-mark-h: 24px;             /* 1:2.4 ratio */
}


/* ──────────────────────────────────────────────────────────────
   2. TYPOGRAPHY LAYER
   System-level type scales. Monospace metadata.
   ────────────────────────────────────────────────────────────── */

/* Primary judgment / hero text — 94% white */
.vs-t0 {
  font-size: 19px;
  font-weight: 600;
  color: var(--vs-text-0);
  line-height: 1.55;
  letter-spacing: -0.02em;
}

/* Secondary reading / expand layer — ~70% */
.vs-t1 {
  font-size: 13px;
  font-weight: 400;
  color: var(--vs-text-1);
  line-height: 1.75;
}

/* Tertiary / weak body */
.vs-t2 {
  font-size: 12px;
  font-weight: 400;
  color: var(--vs-text-2);
  line-height: 1.65;
}

/* Metadata — monospace, uppercase, 11px, system-log feel */
.vs-meta {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vs-text-2);
  line-height: 1.4;
}


/* ──────────────────────────────────────────────────────────────
   3. SYMBOL LAYER — Core Mark System
   ────────────────────────────────────────────────────────────── */

/* ─── 3.1  A1 · 禅圆（尺寸 = 字 font-size）─── */
/*
   mark 尺寸用 1em，和 parent font-size 一致 —— mark 和字等大，
   几何中心对齐即视觉对齐。尺寸单位从 px 改 em，跟随字体自适应。
*/

.vs-mark-a1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  line-height: 0;
}

.vs-mark-a1 svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vs-mark-a1--sm { width: 0.85em; height: 0.85em; }
.vs-mark-a1--lg { width: 1em; height: 1em; }
.vs-mark-a1--xl { width: 28px; height: 28px; }


/* ─── 3.2  Half-Phase Moon (B) ─── */
/*
   左实 + 右虚线月相 —— 还在显影的镜像。
   苗头 / 刚冒头 / pending 观察的 inline bullet。
   viewBox 24×24 (1:1)。
*/

.vs-mark-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
}

.vs-mark-b svg {
  display: block;
  width: 100%;
  height: 100%;
}

.vs-mark-b--sm { width: 11px; height: 11px; }
.vs-mark-b--lg { width: 18px; height: 18px; }


/* ─── 3.2b  Dial (主 logo 化身) ─── */
/*
   简化版镜盘 —— 外镜框 + 2 圈虚线档 + 4 spoke + 月心光晕。
   用于：pg-hero 登录页、favicon、分享图底部 wordmark glyph。
   viewBox 48×48。
*/

.vs-mark-dial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 0;
}

.vs-mark-dial svg { display: block; width: 100%; height: 100%; }

.vs-mark-dial--sm { width: 20px; height: 20px; }
.vs-mark-dial--md { width: 32px; height: 32px; }
.vs-mark-dial--lg { width: 48px; height: 48px; }
.vs-mark-dial--xl { width: 72px; height: 72px; }


/* ─── 3.3  Strikethrough State Syntax ─── */
/*
   1px strikethrough = old judgment overwritten by new judgment.
   NOT a typographic effect — a state signal.
*/

.vs-strike {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--vs-text-2);
  opacity: 0.55;
}


/* ──────────────────────────────────────────────────────────────
   4. CONTAINER LAYER — Hierarchy System
   ────────────────────────────────────────────────────────────── */

/* ─── 4.1  Strong Container ─── */
/*
   For: evidence, objects, actionable data blocks.
   1px border, BG-2 fill. "This is an operable data block."
*/

.vs-container-strong {
  background: var(--vs-bg-2);
  border: var(--vs-hairline) solid var(--vs-line-1);
  border-radius: var(--vs-r-md);
  padding: var(--vs-sp-4);
}

/* Activated strong container — accent border */
.vs-container-strong.is-active {
  border-color: var(--vs-accent);
}


/* ─── 4.2  Zero Container ─── */
/*
   For: conclusions, insights, confirmed facts.
   No border, floats directly on background.
   "This is a confirmed fact."
*/

.vs-container-zero {
  background: transparent;
  border: none;
  padding: 0;
}


/* ─── 4.3  Weak Container / L-slot / Structure line ─── */
/*
   For: grouping, sub-regions, latent zones.
   LINE-0 or LINE-1 only. Never accent by default.
*/

.vs-container-weak {
  background: transparent;
  border: var(--vs-hairline) solid var(--vs-line-0);
  border-radius: var(--vs-r-sm);
  padding: var(--vs-sp-3);
}


/* ──────────────────────────────────────────────────────────────
   5. BUTTON SYSTEM
   Deep base + fine border line. No bright solid CTA.
   ────────────────────────────────────────────────────────────── */

.vs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vs-sp-2);
  padding: var(--vs-sp-3) var(--vs-sp-5);
  background: var(--vs-bg-1);
  border: var(--vs-hairline) solid var(--vs-line-2);
  border-radius: var(--vs-r-md);
  color: var(--vs-text-0);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.4;
}

.vs-btn:hover {
  border-color: var(--vs-accent);
  background: var(--vs-bg-2);
}

.vs-btn:active {
  border-color: var(--vs-accent);
  background: var(--vs-bg-2);
  transform: scale(0.98);
}

/* Full-width variant */
.vs-btn--block {
  width: 100%;
}

/* Ghost variant — even more restrained */
.vs-btn--ghost {
  background: transparent;
  border-color: var(--vs-line-1);
}

.vs-btn--ghost:hover {
  border-color: var(--vs-line-2);
  background: rgba(240,243,246, 0.02);
}

/* Text-only button */
.vs-btn--text {
  background: none;
  border: none;
  color: var(--vs-text-2);
  padding: var(--vs-sp-2) 0;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vs-btn--text:hover {
  color: var(--vs-accent);
}

/* Disabled */
.vs-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}


/* ──────────────────────────────────────────────────────────────
   6. STRUCTURAL PRIMITIVES — Hairlines, Baselines, Slots
   ────────────────────────────────────────────────────────────── */

/* ─── 6.1  Hairline rule ─── */

.vs-rule {
  height: var(--vs-hairline);
  background: var(--vs-line-0);
  border: none;
  margin: 0;
}

.vs-rule--medium {
  background: var(--vs-line-1);
}

.vs-rule--strong {
  background: var(--vs-line-2);
}

/* ─── 6.2  Vertical baseline (left-axis) ─── */
/*
   The structural spine for distribution pages.
   A 1px vertical line on the left edge.
*/

.vs-baseline {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--vs-hairline);
  background: var(--vs-line-0);
  pointer-events: none;
}

.vs-baseline--medium {
  background: var(--vs-line-1);
}

/* ─── 6.3  Gossamer lead line (游丝引导线) ─── */
/*
   Ultra-thin connector from mark to content.
   NOT a route/path — a visual gravity thread.
*/

.vs-gossamer {
  display: block;
  width: var(--vs-hairline);
  background: var(--vs-line-0);
  margin: 0 auto;
  flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────────
   7. PAGE SKELETON LAYER — Composition Zones
   ────────────────────────────────────────────────────────────── */

/* ─── 7.1  Stage Zone (舞台区) ─── */
/*
   Top prominence area.
   Cover page: upper 30%+ with gravity-float.
   Distribution page: upper 15-20% with headstone feel.
   Contains A1 + key judgment. Zero container.
*/

.vs-stage {
  position: relative;
  padding: var(--vs-sp-8) 0 var(--vs-sp-6) 0;
}

/* Cover variant — expansive air, gravity-up */
.vs-stage--cover {
  padding: var(--vs-sp-12) 0 var(--vs-sp-8) 0;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Distribution variant — compact headstone */
.vs-stage--strata {
  padding: var(--vs-sp-6) 0 var(--vs-sp-4) 0;
}

/* Reading variant — detail page opening */
.vs-stage--reading {
  padding: var(--vs-sp-6) 0 var(--vs-sp-8) 0;
}


/* ─── 7.2  Structure Zone (结构层) ─── */
/*
   Below the stage. Contains groups, slots, nodes.
   Has relative positioning for baseline attachment.
*/

.vs-structure {
  position: relative;
  padding-left: var(--vs-sp-5);  /* room for baseline */
}


/* ─── 7.3  L-Slot (L 型断层槽) ─── */
/*
   A group container with L-shaped left+bottom structure.
   Group label hugs the left baseline. Content flows right.
*/

.vs-l-slot {
  position: relative;
  padding: var(--vs-sp-4) 0 var(--vs-sp-5) var(--vs-sp-4);
  margin-bottom: var(--vs-sp-2);
}

/* Left edge of the L */
.vs-l-slot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--vs-hairline);
  background: var(--vs-line-1);
}

/* Bottom edge of the L */
.vs-l-slot::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--vs-sp-6);
  height: var(--vs-hairline);
  background: var(--vs-line-1);
}

/* L-slot group label */
.vs-l-slot__label {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--vs-text-2);
  margin-bottom: var(--vs-sp-3);
  text-align: left;
  /* Never center, never large — hugs baseline */
}


/* ─── 7.4  Node Grid (节点积木) ─── */
/*
   Dense grid of compact nodes within an L-slot.
   NOT a vertical list. Inline-flex wrap or grid.
*/

.vs-node-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vs-sp-2);
}


/* ─── 7.5  State Node (状态节点) ─── */
/*
   A compact object representation in distribution view.
   Max 2 lines. Fixed height. Ellipsis enforced.
   Contains: mark + name + one core word.
   Click target >= node visual.
*/

.vs-node {
  display: flex;
  align-items: center;
  gap: var(--vs-sp-2);
  padding: var(--vs-sp-2) var(--vs-sp-3);
  background: var(--vs-bg-2);
  border: var(--vs-hairline) solid var(--vs-line-1);
  border-radius: var(--vs-r-sm);
  min-width: 0;
  max-width: 180px;
  height: 44px;           /* fixed height — 2 lines max */
  cursor: pointer;
  transition: border-color 0.15s;
  overflow: hidden;
}

.vs-node:hover {
  border-color: var(--vs-line-2);
}

.vs-node.is-active {
  border-color: var(--vs-accent);
}

.vs-node__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--vs-text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.vs-node__word {
  font-size: 10px;
  color: var(--vs-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.vs-node__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ─── 7.6  Background Zone (背景潜像区) ─── */
/*
   Recessed, quiet zone for low-weight / accumulating items.
   Still clickable. Not a waste bin.
*/

.vs-background-zone {
  position: relative;
  padding: var(--vs-sp-4) 0 var(--vs-sp-4) var(--vs-sp-4);
  margin-top: var(--vs-sp-4);
}

.vs-background-zone::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--vs-hairline);
  background: var(--vs-line-0);
}

/* Background nodes are more ghostly */
.vs-background-zone .vs-node {
  background: var(--vs-bg-1);
  border-color: var(--vs-line-0);
  opacity: 0.7;
}

.vs-background-zone .vs-node:hover {
  opacity: 1;
  border-color: var(--vs-line-1);
}


/* ─── 7.7  Terminal (索引槽) ─── */
/*
   Quiet index slot at page top or bottom.
   Unobtrusive. Does not compete with stage.
*/

.vs-terminal {
  padding: var(--vs-sp-3) 0;
  display: flex;
  align-items: center;
  gap: var(--vs-sp-3);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.vs-terminal:hover {
  opacity: 0.8;
}


/* ─── 7.8  Macro Gap (宏观留白) ─── */
/*
   48px or 64px intentional break between zones.
   Structural breathing, not just margin.
*/

.vs-gap-macro {
  height: var(--vs-sp-12);   /* 48px */
}

.vs-gap-macro--lg {
  height: var(--vs-sp-16);   /* 64px */
}


/* ──────────────────────────────────────────────────────────────
   8. SEMANTIC BOUNDARIES — What things are NOT
   Encoded as CSS comments for implementors.
   ────────────────────────────────────────────────────────────── */

/*
   SEMANTIC CONTRACT:
   ──────────────────
   - vs-baseline  = structural axis, NOT a route/path
   - vs-rule      = breathing separator, NOT a coordinate map
   - vs-gossamer  = gravity thread, NOT a data connection
   - vs-node      = compact state block, NOT an avatar card
   - vs-l-slot    = categorical group, NOT a folder
   - vs-mark-a1   = visual first-letter, NOT a brand sticker
   - vs-mark-b    = resolving state, NOT a loading spinner
   - vs-strike    = judgment override, NOT strikethrough decoration
   - vs-accent    = scarce calibration color, NOT global primary
   - vs-background-zone = latent observation, NOT waste/archive

   Distance ≠ closeness quantification
   Texture  ≠ coordinate map
   Line     ≠ relationship path
*/


/* ──────────────────────────────────────────────────────────────
   9. UTILITY CLASSES
   ────────────────────────────────────────────────────────────── */

/* Flex alignment shortcuts */
.vs-flex        { display: flex; }
.vs-flex-col    { display: flex; flex-direction: column; }
.vs-flex-center { display: flex; align-items: center; }
.vs-flex-between { display: flex; align-items: center; justify-content: space-between; }
.vs-flex-wrap   { flex-wrap: wrap; }
.vs-gap-1       { gap: var(--vs-sp-1); }
.vs-gap-2       { gap: var(--vs-sp-2); }
.vs-gap-3       { gap: var(--vs-sp-3); }
.vs-gap-4       { gap: var(--vs-sp-4); }

/* Truncation */
.vs-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clamp to N lines (use with style="--vs-lines: N") */
.vs-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--vs-lines, 2);
  overflow: hidden;
}


/* ──────────────────────────────────────────────────────────────
   10. PAGE-LEVEL SYSTEM OVERRIDES
   Minimal overrides for pages that have adopted system-v1.
   Only system-migrated pages go here.
   ────────────────────────────────────────────────────────────── */

/* Network page — system-first */
#pg-network {
  background: var(--vs-bg-0);
  padding-bottom: var(--vs-sp-10);
}

#pg-network #net-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Ensure node click targets are generous despite compact visuals */
#pg-network .vs-node {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

/* N1: Network buttons align with global border-radius:0 language */
#pg-network .vs-btn {
  border-radius: 0;
}

/* N7: Person hover/active feedback */
.vs-exp-person {
  transition: opacity 0.15s;
}
.vs-exp-person:hover {
  opacity: 0.75;
}
.vs-exp-person:active {
  opacity: 0.6;
}


/* ──────────────────────────────────────────────────────────────
   11. EXPRESSION PRIMITIVES
   "排版即容器，对齐即骨架。
    当做顶级画廊去策展留白。"

   These are EXPRESSION primitives (vs-exp-*) — curatorial,
   human-facing layouts for pages like Home, Network, Detail.
   Built by: buildHeroStatement(), buildGroupField()
   in primitives.js.

   DISTINCT from structural primitives (vs-node, vs-l-slot,
   vs-node-grid) which are data-view components for
   distribution/instrument pages.

   A1 唯一真源: symbols.js → markA1()
   Hero / inline / state 全部从 SVG 真源派生。
   .vs-exp-hero__mark 仅做 float 定位容器，不再有伪元素自绘。
   ────────────────────────────────────────────────────────────── */

/* ─── 11.1  Hero Statement Primitive ─── */

.vs-exp-hero {
  padding: 64px 0 0 0;
}

/* A1 drop-cap · mark 尺寸 = 字 font-size（1em），line-height 1.8em
   margin-top = (1.8em - 1em) / 2 = 0.4em → 几何中心对齐字 line-box 中心
   em 单位自适应字号，主页/档案页用同一公式 */
.vs-exp-hero__mark {
  float: left;
  margin-right: 0.3em;
  margin-top: 0.4em;
}

.vs-exp-hero__sentence {
  font-size: 19px;
  font-weight: 600;
  color: var(--vs-text-0);
  line-height: 1.7;
  letter-spacing: -0.012em;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-width: 380px;
}

/* Sub-line: born from the same alignment origin as the sentence.
   Shares the left margin created by the floated A1 mark. */
.vs-exp-hero__sub {
  clear: both;
  margin-top: 24px;
  padding-left: 7px;    /* aligns to A1 mark center axis (14px / 2) */
  font-size: 12px;
  color: var(--vs-text-2);
  letter-spacing: 0.04em;
  opacity: 0.38;
  line-height: 1.5;
}


/* ─── 11.2  Curated Group Field Primitive ─── */
/*
   buildGroupField(title, primary, secondaries) → HTMLElement
   Gallery-wall layout. Group title = watermark annotation.
   Primary person = dominating the field by type scale.
   Secondary persons = two-column, quieter presence.
   NO borders, NO cage lines, NO L-brackets.
   Structure = type weight + whitespace + alignment.
*/

.vs-exp-group {
  padding: 0;
}

/* Group title — watermark with spatial organizing power.
   Not a section header, not invisible. A gallery-wall label:
   you don't stare at it, but it anchors everything below. */
.vs-exp-group__title {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vs-text-2);
  opacity: 0.30;
  margin-bottom: 36px;
  padding-left: 0;
  font-weight: 400;
}

/* ── Person: archival slice, not a list item ── */
.vs-exp-person {
  position: relative;
  margin-bottom: 6px;
  cursor: pointer;
}

/* Primary person — dominates the field.
   Left accent mark = dossier margin annotation. */
.vs-exp-person--primary {
  padding: 0 0 20px 14px;
  margin-bottom: 12px;
}

.vs-exp-person--primary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 2px;
  height: 20px;
  background: var(--vs-text-2);
  opacity: 0.18;
  border-radius: 0.5px;
}

.vs-exp-person__name {
  font-size: 20px;
  font-weight: 600;
  color: var(--vs-text-0);
  line-height: 1.35;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.vs-exp-person__desc {
  font-size: 13px;
  color: var(--vs-text-1);
  line-height: 1.7;
  opacity: 0.60;
  max-width: 85%;
}

/* ── Secondary persons: two-column, quieter but still filed ── */
.vs-exp-group__secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  margin-top: 4px;
}

.vs-exp-group__secondary .vs-exp-person {
  padding: 12px 0 14px 10px;
  border-top: 1px solid var(--vs-line-0);
  position: relative;
}

/* Secondary left micro-mark — lighter, shorter than primary */
.vs-exp-group__secondary .vs-exp-person::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 1.5px;
  height: 12px;
  background: var(--vs-text-2);
  opacity: 0.12;
  border-radius: 0.5px;
}

.vs-exp-group__secondary .vs-exp-person__name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: 0;
}

.vs-exp-group__secondary .vs-exp-person__desc {
  font-size: 11.5px;
  opacity: 0.45;
  max-width: 100%;
  line-height: 1.6;
}


/* ──────────────────────────────────────────────────────────────
   12. SHARED CONTENT LANGUAGE
   Secondary-level primitives that pages use below the opening.
   These ensure "above and below" speak the same language.
   ────────────────────────────────────────────────────────────── */

/* ─── 12.1  Meta Line ─── */
/*
   System-feel attribution: time, source, counts.
   Not a dim caption, not an engineering log.
*/

.vs-meta-line {
  font-size: 11px;
  color: var(--vs-text-2);
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.55;
}

.vs-meta-line strong,
.vs-meta-line b {
  font-weight: 500;
  color: var(--vs-text-1);
  opacity: 1;
}


/* ─── 12.2  Secondary Surface ─── */
/*
   A quiet content zone below the opening. Replaces old card with
   left-edge accent. No background fill, no shadow, no border-radius.
*/

.vs-surface {
  padding: var(--vs-sp-4) var(--vs-sp-5);
  border-left: 1px solid var(--vs-line-0);
  background: transparent;
}

.vs-surface--clickable {
  cursor: pointer;
  transition: opacity 0.15s;
}

.vs-surface--clickable:hover {
  opacity: 0.8;
}


/* ─── 12.3  Action Zone ─── */
/*
   Page closure layer. A quiet boundary + buttons.
   Not a toolbar, not a floating bar.
*/

.vs-action-zone {
  padding-top: var(--vs-sp-5);
  margin-top: var(--vs-sp-5);
  border-top: 1px solid var(--vs-line-0);
}

.vs-action-zone .vs-btn {
  font-size: 13px;
}

.vs-action-zone__tagline {
  text-align: center;
  margin-top: var(--vs-sp-3);
  font-size: 10px;
  color: var(--vs-text-2);
  opacity: 0.18;
  letter-spacing: 0.08em;
}


/* ─── 12.4  Index Entry ─── */
/*
   Lightweight name reference — not a pill, not a tag,
   not a filter chip. A quiet index pointer.
*/

.vs-index-entry {
  font-size: 11px;
  color: var(--vs-text-1);
  opacity: 0.50;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.15s;
}

.vs-index-entry:hover {
  opacity: 0.8;
}

.vs-index-entry--dim {
  color: var(--vs-text-2);
  opacity: 0.35;
}


/* ──────────────────────────────────────────────────────────────
   13. GLOBAL STATE LANGUAGE
   Shared empty / weak / latent / pending patterns.
   Any page can use these without local overrides.
   ────────────────────────────────────────────────────────────── */

/* Empty state — quiet degradation, no placeholder chrome */
.vs-state-empty {
  font-size: 13px;
  color: var(--vs-text-2);
  line-height: 1.75;
  opacity: 0.6;
  padding: var(--vs-sp-8) 0;
}

/* Latent / not-yet-formed — barely visible, not absent */
.vs-state-latent {
  font-size: 11px;
  color: var(--vs-text-2);
  line-height: 1.65;
  opacity: 0.4;
  padding: var(--vs-sp-3) 0;
}

/* Pending — accumulating, not ready */
.vs-state-pending {
  font-size: 11px;
  color: var(--vs-text-2);
  line-height: 1.65;
  opacity: 0.55;
  border-left: 1px solid var(--vs-line-0);
  padding: var(--vs-sp-2) 0 var(--vs-sp-2) var(--vs-sp-4);
}

/* Quiet hint — "还有更多" / "待显影" style prompts */
.vs-hint-quiet {
  font-size: 10px;
  color: var(--vs-text-2);
  letter-spacing: 0.04em;
  opacity: 0.35;
  padding: var(--vs-sp-2) 0;
}

/* ═══════════════════════════════════════════════════════════════
   Share buttons · 分享入口（主页 hero/发现/档案罗盘）
   统一"小月光链接"风格，不抢主 CTA 风头
   ═══════════════════════════════════════════════════════════════ */
.mir-share-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:none;cursor:pointer;
  color:var(--vs-text-2);
  font-size:11px;letter-spacing:.1em;
  font-family:inherit;
  padding:6px 10px;
  opacity:0.45;
  transition:opacity .2s, color .2s;
}
.mir-share-btn:hover{
  opacity:0.9;
  color:var(--vs-accent-moon, #e8d9b6);
}
.mir-share-btn__icon{
  width:12px;height:12px;
  display:inline-block;
  opacity:0.8;
}
/* Inline-position helper for existing cards */
.mh-main .mir-share-btn,
.mh-finding-card .mir-share-btn{
  position:absolute;top:8px;right:8px;
}
.mh-main, .mh-finding-card{position:relative}

.md-mirror-wrap .mir-share-btn{
  position:absolute;top:0;right:0;
}

/* ═══════════════════════════════════════════════════════════════
   Privacy page + footer link + delete confirm
   ═══════════════════════════════════════════════════════════════ */
.mh-footer-meta{
  text-align:center;
  margin-top:var(--vs-sp-4);
  font-size:11px;
  letter-spacing:.06em;
  opacity:0.35;
  transition:opacity .2s;
}
.mh-footer-meta:hover{opacity:0.7}
.mh-footer-meta a{
  color:var(--vs-text-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.mh-footer-meta a:hover{
  color:var(--vs-text-1);
  border-bottom-color:var(--vs-line-1);
}

.pg-privacy{padding-top:var(--vs-sp-8)}
.privacy-intro{
  color:var(--vs-text-1);
  font-size:13.5px;line-height:1.9;
  margin:0 0 var(--vs-sp-8) 0;
  opacity:0.85;
  word-break:keep-all;overflow-wrap:break-word;
}
.privacy-block{
  margin-bottom:var(--vs-sp-8);
  padding-left:var(--vs-sp-4);
  border-left:1px solid var(--vs-line-0);
}
.privacy-block__title{
  color:var(--vs-accent-moon, #e8d9b6);
  font-size:13px;
  letter-spacing:.08em;
  margin:0 0 var(--vs-sp-3) 0;
  opacity:0.9;
}
.privacy-block__body{
  color:var(--vs-text-1);
  font-size:13px;line-height:1.95;
  margin:0;
  word-break:keep-all;overflow-wrap:break-word;
}
.privacy-emph{
  color:var(--vs-text-0);
  border-bottom:1px solid rgba(232,217,182,0.3);
}
.privacy-link{
  color:var(--vs-accent-moon, #e8d9b6);
  text-decoration:none;
  border-bottom:1px solid rgba(232,217,182,0.4);
  padding-bottom:1px;
  transition:border-color .2s;
}
.privacy-link:hover{border-bottom-color:rgba(232,217,182,0.8)}

.privacy-danger{
  margin:var(--vs-sp-10) 0 var(--vs-sp-8);
  padding:var(--vs-sp-5);
  border:1px solid rgba(200,149,106,0.25);
  border-left:2px solid #c8956a;
  border-radius:var(--vs-r-sm);
  background:rgba(200,149,106,0.03);
}
.privacy-danger__title{
  color:#c8956a;
  font-size:13px;
  letter-spacing:.1em;
  margin:0 0 var(--vs-sp-3) 0;
}
.privacy-danger__body{
  color:var(--vs-text-1);
  font-size:12.5px;line-height:1.85;
  margin:0 0 var(--vs-sp-5) 0;
  opacity:0.88;
  word-break:keep-all;overflow-wrap:break-word;
}
.privacy-delete-btn{
  width:100%;
  background:transparent;
  border:1px solid rgba(200,149,106,0.55);
  color:#c8956a;
  font-size:13px;letter-spacing:.08em;
  padding:12px 16px;border-radius:var(--vs-r-sm);
  cursor:pointer;font-family:inherit;
  transition:background .2s, border-color .2s, color .2s;
}
.privacy-delete-btn:hover{
  background:rgba(200,149,106,0.08);
  border-color:rgba(200,149,106,0.85);
  color:#d9a37a;
}
.privacy-delete-btn:disabled{
  opacity:0.5;cursor:default;
}

.privacy-footnote{
  color:var(--vs-text-2);
  text-align:center;
  opacity:0.45;
  letter-spacing:.06em;
  padding:var(--vs-sp-4) 0 var(--vs-sp-8);
}

.privacy-confirm-go{
  background:rgba(200,149,106,0.15);
  border:1px solid rgba(200,149,106,0.65);
  color:#d9a37a;
  font-family:inherit;
  cursor:pointer;
  padding:10px 16px;
  font-size:13px;letter-spacing:.06em;
  border-radius:var(--vs-r-sm);
  transition:background .2s, border-color .2s;
}
.privacy-confirm-go:hover{
  background:rgba(200,149,106,0.25);
  border-color:rgba(200,149,106,0.85);
}
.privacy-confirm-go:disabled{opacity:0.5;cursor:default}

/* ═══════════════════════════════════════════════════════════════
   Error toast · 统一错误提示
   底部居中月光玻璃小卡，5s auto-dismiss（persistent 除外）
   ═══════════════════════════════════════════════════════════════ */
.mir-toast{
  position:fixed;
  left:50%;bottom:calc(env(safe-area-inset-bottom,0) + 24px);
  transform:translate(-50%, 20px);
  max-width:calc(100% - 32px);width:360px;
  display:flex;align-items:flex-start;gap:var(--vs-sp-3);
  padding:var(--vs-sp-4) var(--vs-sp-5);
  background:rgba(22,26,34,0.96);
  border:1px solid var(--vs-line-1);
  border-left:2px solid var(--vs-accent-moon, rgba(232,217,182,0.55));
  border-radius:var(--vs-r-sm);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
  z-index:10000;
  font-family:inherit;
}
.mir-toast.mir-toast--visible{
  opacity:1;transform:translate(-50%, 0);pointer-events:auto;
}
.mir-toast__glyph{
  flex:0 0 auto;
  width:6px;height:6px;margin-top:9px;
  border-radius:50%;
  background:var(--vs-accent-moon, #e8d9b6);
  box-shadow:0 0 8px rgba(232,217,182,0.5);
}
/* kind-specific accent */
.mir-toast--network .mir-toast__glyph,
.mir-toast--offline .mir-toast__glyph{background:#d08b62;box-shadow:0 0 8px rgba(208,139,98,0.5)}
.mir-toast--auth    .mir-toast__glyph{background:#c8956a;box-shadow:0 0 8px rgba(200,149,106,0.5)}
.mir-toast--network,.mir-toast--offline{border-left-color:rgba(208,139,98,0.65)}
.mir-toast--auth{border-left-color:rgba(200,149,106,0.65)}

.mir-toast__body{
  flex:1 1 auto;
  min-width:0;
}
.mir-toast__message{
  color:var(--vs-text-0);
  font-size:13px;line-height:1.7;
  margin:0;
  word-break:keep-all;overflow-wrap:break-word;
}
.mir-toast__retry{
  display:inline-block;margin-top:var(--vs-sp-2);
  background:transparent;border:none;
  color:var(--vs-accent-moon, #e8d9b6);
  font-size:12px;letter-spacing:.05em;
  cursor:pointer;padding:2px 0;
  opacity:0.88;font-family:inherit;
  text-decoration:underline;text-underline-offset:3px;
  transition:opacity .2s;
}
.mir-toast__retry:hover{opacity:1}
.mir-toast__close{
  flex:0 0 auto;
  background:transparent;border:none;cursor:pointer;
  color:var(--vs-text-2);font-size:12px;line-height:1;
  opacity:0.5;padding:4px 6px;border-radius:var(--vs-r-sm);
  font-family:inherit;margin:-4px -6px -4px 0;
  transition:opacity .2s, background .2s;
}
.mir-toast__close:hover{opacity:0.9;background:rgba(255,255,255,0.04)}

@media (prefers-reduced-motion: reduce){
  .mir-toast{transition:opacity .2s}
  .mir-toast.mir-toast--visible{transform:translate(-50%, 0)}
}

/* ═══════════════════════════════════════════════════════════════
   First-visit spotlight tour · 新手引导
   3 步依次高亮主页关键入口：mh-main / mh-network-entry / mh-actions
   ═══════════════════════════════════════════════════════════════ */
.mir-tour{
  position:fixed;inset:0;z-index:9000;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.mir-tour.mir-tour--visible{opacity:1;pointer-events:auto}
/* Dim layer kept as empty stacking context; actual dimming is applied
   as a huge spread on the ring's box-shadow, so the ring's interior
   stays crisp and readable (no blur or overlay over the target). */
.mir-tour__dim{
  position:absolute;inset:0;
  pointer-events:none;
}
/* Spotlight ring — 月光环 + 9999px spread = 镂空 dim */
.mir-tour__ring{
  position:fixed;
  border:1.5px solid rgba(232,217,182,0.85);
  border-radius:8px;
  background:transparent;
  box-shadow:
    0 0 0 2px rgba(232,217,182,0.18),
    0 0 26px rgba(232,217,182,0.28),
    0 0 0 9999px rgba(10,12,16,0.82);
  pointer-events:none;
  transition:top .45s cubic-bezier(.4,0,.2,1),
             left .45s cubic-bezier(.4,0,.2,1),
             width .45s cubic-bezier(.4,0,.2,1),
             height .45s cubic-bezier(.4,0,.2,1);
  z-index:2;
}
/* Tip card — 玻璃卡说明 */
.mir-tour__tip{
  position:fixed;
  max-width:300px;
  width:calc(100% - 40px);
  padding:var(--vs-sp-5);
  background:rgba(22,26,34,0.92);
  border:1px solid var(--vs-line-1);
  border-left:2px solid rgba(232,217,182,0.55);
  border-radius:var(--vs-r-sm);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  transition:top .45s cubic-bezier(.4,0,.2,1),
             left .45s cubic-bezier(.4,0,.2,1),
             opacity .3s ease;
  z-index:3;
}
.mir-tour__tip-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--vs-sp-3);
}
.mir-tour__tip-step{
  color:var(--vs-text-2);
  opacity:0.7;
  letter-spacing:.12em;
}
.mir-tour__tip-skip{
  background:transparent;border:none;
  color:var(--vs-text-2);
  font-size:11px;letter-spacing:.05em;
  cursor:pointer;padding:4px 8px;
  opacity:0.55;font-family:inherit;
  transition:opacity .2s;
}
.mir-tour__tip-skip:hover{opacity:0.9}
.mir-tour__tip-title{
  color:var(--vs-accent-moon, #e8d9b6);
  font-size:14px;letter-spacing:.08em;
  margin:0 0 var(--vs-sp-3) 0;
  opacity:0.95;
}
.mir-tour__tip-body{
  color:var(--vs-text-0);
  font-size:13px;line-height:1.85;
  margin:0 0 var(--vs-sp-5) 0;
  word-break:keep-all;overflow-wrap:break-word;
}
.mir-tour__tip-actions{
  display:flex;justify-content:flex-end;
}
.mir-tour__tip-next{
  background:transparent;
  border:1px solid rgba(232,217,182,0.45);
  color:var(--vs-text-0);
  font-size:12px;letter-spacing:.08em;
  padding:8px 18px;border-radius:var(--vs-r-sm);
  cursor:pointer;font-family:inherit;
  transition:background .2s, border-color .2s;
}
.mir-tour__tip-next:hover{
  background:rgba(232,217,182,0.08);
  border-color:rgba(232,217,182,0.7);
}
.mir-tour__tip-next--final{
  background:rgba(232,217,182,0.15);
  border-color:rgba(232,217,182,0.6);
}

@media (prefers-reduced-motion: reduce){
  .mir-tour,
  .mir-tour__ring,
  .mir-tour__tip{transition:none}
}