/* ============================================================
   space-read.css —— 阅读页的结构重做
   浅色版是「便签卡片浮在点阵画布上」（FigJam 语言）。
   这里换成「着陆之后的勘测记录」：一栏文档 + 编号章节头 +
   遥测数据条 + 右侧高度计。只在 body.is-read 下生效。
   ============================================================ */

/* ── 画布：点阵压到几乎不可见，让深空当底 ──────── */
body.is-read .board { background-color: transparent; }
body.is-read .board__world,
body.is-read .board { --dot: rgba(212, 212, 212, .05); }

/* ── 文档栏 ─────────────────────────────────────── */
body.is-read .read {
  --pad-x: clamp(16px, 3vw, 40px);
  --sec-pad: 0px;
  counter-reset: sec;
  padding-bottom: 22vh;
}

/* ── 章节：卡片外壳全部去掉，改成文档块 ────────── */
body.is-read .rsec {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  min-height: 0;
  margin-top: 9vh;
}
body.is-read .rsec:not(.rsec--cover) { counter-increment: sec; }
body.is-read .rsec + .rsec { margin-top: 9vh; }

/* 章节头：编号 · 名称 ——————————— */
body.is-read .sec__pill {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
body.is-read .rsec:not(.rsec--cover) .sec__pill::before {
  content: counter(sec, decimal-leading-zero);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--tip, var(--accent));
}
body.is-read .sec__pill::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* 原来那个小色块：收成一个 3px 的方点，只在章节头左侧当刻度 */
body.is-read .sec__pill i {
  width: 3px; height: 3px; border-radius: 0;
  background: var(--tip, var(--accent));
  order: -1;
  opacity: .8;
}

/* ── 正文：收窄到能读的行宽 ─────────────────────── */
body.is-read .rsec .sec__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.45;
  letter-spacing: -.005em;
  max-width: 26em;
  margin: 0 0 22px;
}
body.is-read .rsec .sec__lines { gap: 0; }
body.is-read .rsec .sec__lines p {
  font-size: 16.5px;
  line-height: 2.0;
  color: var(--ink);
  max-width: 36em;
  margin-bottom: 19px;
}
body.is-read .rsec .sec__lines p:last-child { margin-bottom: 0; }
/* 加粗强调：下划线，不用色块（色块在暗底上像选中态） */
body.is-read .sec__lines b.em,
body.is-read .sec__lines strong {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--tip, var(--accent)) 62%, transparent);
}

/* ── COVER：任务抬头 ────────────────────────────── */
body.is-read .rsec--cover {
  margin-top: 0;
  padding-top: 24vh;
  padding-bottom: 0;
}
/* 任务徽章：项目那枚点阵图标裱进一个圆环 */
body.is-read .rsec--cover .sec__pill {
  width: 56px; height: 56px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  font-size: 0;
  letter-spacing: 0;
}
body.is-read .rsec--cover .sec__pill::after { display: none; }
body.is-read .rsec--cover .sec__pill::before {
  content: "";
  position: absolute; inset: -5px;
  border: 1px dashed var(--line);
  border-radius: 50%;
}
body.is-read .rsec--cover .sec__pill i {
  width: 12px; height: 12px; opacity: 1;
}
/* tag：不再是歪着贴的色标，改成一行 mono 铭牌 */
body.is-read .rsec--cover .sec__tag {
  display: block;
  transform: none;
  padding: 0;
  margin-bottom: 14px;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tip, var(--accent));
}
body.is-read .rsec--cover .sec__title {
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.28;
  letter-spacing: -.012em;
  max-width: 18em;
  margin-bottom: 16px;
}
body.is-read .rsec--cover .sec__lines p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  max-width: 34em;
}
body.is-read .rsec--cover .sec__lines p + p {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 16px;
}

/* ── 遥测数据条：facts 从色块卡改成仪表读数 ────── */
body.is-read .sec__facts {
  margin-top: 40px;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
body.is-read .sec__fact {
  padding: 17px 18px 16px;
  border-radius: 0;
  background: none;
  border-left: 1px solid var(--line);
}
body.is-read .sec__fact:first-child { border-left: 0; padding-left: 0; }
body.is-read .sec__fact b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
  order: 2;
  margin-top: 7px;
}
body.is-read .sec__fact span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  order: 1;
}
body.is-read .sec__fact { display: flex; flex-direction: column; }

/* ── 章节目录 → 右侧高度计 ─────────────────────── */
/* 高度计这套只在宽屏成立：它靠右边那条空白栏活着。
   窄屏下右边没有空白栏，再摊开就是一层半透明的字压在正文上 —— 
   所以 1024 以下整段不生效，交回 site.css 里那个收起的抽屉。 */
@media (min-width: 1025px) {
  body.is-read .anchors {
    right: 40px; bottom: auto; top: 50%;
    transform: translateY(-50%);
    width: auto; max-width: 220px;
  }
  body.is-read .anchors__panel {
    display: flex; flex-direction: column; gap: 0;
    padding: 0 0 0 16px;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
    position: relative;
  }
  body.is-read .anchors__panel::before {
    content: "Altitude";
    display: block;
    font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-4);
    margin-bottom: 14px;
  }
  body.is-read .anchors__item {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 0;
    border-radius: 0;
    background: none;
    font-family: var(--display); font-size: 13px; letter-spacing: .02em;
    color: var(--ink-4);
    transition: color .18s linear, transform .22s var(--e);
  }
  /* 刻度放在一个**定宽的槽**里：直接改 width 会把后面的文字一起推走，
     hover 时整行宽度在跳。槽固定 22px，只让里面那根线伸缩。 */
  body.is-read .anchors__item::before {
    content: ""; width: 22px; height: 2px; flex: none;
    background: linear-gradient(to right, currentColor 0 12px, transparent 12px);
    transition: background .22s var(--e);
  }
  /* hover：刻度伸长并点亮成品牌色，整条往左让一格 —— 原来只有 ink-3 → ink-2
     这一点点色差，等于没有反馈。 */
  body.is-read .anchors__item:hover,
  body.is-read .anchors__item:focus-visible {
    color: var(--ink); background: none; transform: translateX(-5px);
  }
  body.is-read .anchors__item:hover::before,
  body.is-read .anchors__item:focus-visible::before {
    background: linear-gradient(to right, var(--tip, var(--accent)) 0 22px, transparent 22px);
  }
  body.is-read .anchors__item:focus-visible { outline: none; }
  body.is-read .anchors__item[aria-current="true"],
  body.is-read .anchors__item.is-now { color: var(--ink); background: none; }
  body.is-read .anchors__item[aria-current="true"]::before,
  body.is-read .anchors__item.is-now::before,
  body.is-read .anchors__item.is-on::before {
    background: linear-gradient(to right, var(--tip, var(--accent)) 0 22px, transparent 22px);
  }
  body.is-read .anchors__item.is-on { color: var(--ink); }
  body.is-read .anchors__item i,
  body.is-read .anchors__item .anchors__dot { display: none; }
}

/* 窄屏：抽屉要看得见自己的边界，点得动，且绝不压字 */
@media (max-width: 1024px) {
  body.is-read .anchors { right: 12px; left: auto; top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none;
    width: auto; max-width: calc(100vw - 24px); }
  body.is-read .anchors__panel {
    padding: 6px; border: 1px solid var(--line-2); border-left: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 18px 48px -18px rgba(0,0,0,.8);
    max-height: min(56dvh, calc(100dvh - 190px)); overflow-y: auto;
  }
  body.is-read .anchors__panel::before { content: none; }
  body.is-read .anchors__item {
    min-height: 44px; padding: 0 12px; gap: 10px;
    font-family: var(--sans); font-size: 15px; color: var(--ink-2);
    border-radius: 8px; transform: none !important;
  }
  body.is-read .anchors__item::before { width: 14px; }
  body.is-read .anchors__toggle { min-height: 44px; font-size: 14px; }
}


/* ── 顶栏 → HUD ─────────────────────────────────── */
body.is-read .chrome {
  top: 18px; left: 24px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  gap: 14px;
}
body.is-read .chrome::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 96px;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,7,11,.97) 0%, rgba(8,7,11,.88) 45%,
    rgba(8,7,11,.55) 72%, transparent 100%);
}
body.is-read .chrome__back {
  width: auto; height: auto;
  padding: 7px 13px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-2);
  transition: .2s linear;
}
body.is-read .chrome__back:hover { border-color: var(--line-3); color: var(--ink); }
body.is-read .chrome__back svg { width: 14px; height: 14px; }
body.is-read .chrome__name {
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink);
}
body.is-read .chrome__badge {
  border-radius: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-4);
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  padding: 5px 9px;
}

/* ── 段落之间那个「继续往下」提示：改成刻度 ────── */
body.is-read .read__cue { margin: 4vh 0; }
body.is-read .read__cue-line {
  width: 1px; height: 44px;
  background: repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 9px);
}
body.is-read .read__cue-t {
  border-radius: 0;
  padding: 7px 13px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 400;
}

/* ── 结尾「下一个项目」→ 跃迁 ──────────────────── */
body.is-read .next-proj {
  border-radius: 0;
  padding: 26px 28px;
}
body.is-read .next-proj:hover { box-shadow: inset 0 0 0 1px var(--line-3); }

/* ── viz 容器：去掉圆角，靠线分区 ───────────────── */
body.is-read .viz { border-radius: 0; }
body.is-read .rsec .viz,
body.is-read .rsec .artifact,
body.is-read .rsec .shot { margin-top: 30px; }

/* ── 窄屏 ───────────────────────────────────────── */
@media (max-width: 900px) {
  body.is-read .anchors { right: 14px; top: auto; bottom: 14px; transform: none; }
  body.is-read .anchors__panel { padding-left: 12px; }
  body.is-read .rsec--cover { padding-top: 16vh; }
  body.is-read .rsec { margin-top: 7vh; }
}

/* ── 封面徽章：把项目那枚点阵图标塞进圆环（由 space.js 注入） ── */
body.is-read .rsec--cover .sec__pill i {
  width: 28px; height: 28px;
  background: none;
  display: grid; place-items: center;
}
body.is-read .rsec--cover .sec__pill i svg {
  width: 100%; height: 100%; shape-rendering: crispEdges;
}
body.is-read .rsec--cover .sec__pill i svg path { fill: var(--tip, var(--accent)); }

/* ── 高度计读数 ─────────────────────────────────── */
body.is-read .sp-altnum { display: block; margin: 0 0 16px; }
body.is-read .sp-altnum b {
  display: block;
  font-family: var(--mono); font-weight: 400; font-size: 16px;
  letter-spacing: .01em; color: var(--tip, var(--accent));
  font-variant-numeric: tabular-nums;
}
body.is-read .sp-altnum span {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ── 圆角一律去掉（内嵌原型的白色视口除外，那是"裱起来的文件"） ── */
body.is-read :is(.rsec, .pv__slide) :is(
  .viz, .doc, .shot, .figure, figure, img, video,
  .chain, .chain__node, .chain__n,
  .tier, .tier__sub, .tiers,
  .prac-phase, .pstep, .prac-pde, .prac,
  .viz-card, .layer, .layers,
  .ba-fold, .ba-col, .ba-cell, .ba-grp__img,
  .rstep, .rswim-ph span, .chip, .tl-c, .note__bubble,
  .sec__fact, .setup, .setup__v, .feat, .opmap__cell, .cols, .col,
  .art__step-t, .art__viewport, .artifact, .embed__stack
) { border-radius: 0; }

body.is-read :is(.rsec, .pv__slide) .bar { border-radius: 0; }

/* 审计残留的三处圆角 */
body.is-read :is(.rsec, .pv__slide) :is(.aud__i, .carou__dot, .hist__item, .gear__item, .feat, .path,
  .prac, .prac-conn, .tbl, .tbl-rubric, .sb, .sb__ph, .note, .ask, .ask__link) { border-radius: 0; }
body.is-read .read__cue-t, body.is-read .sec-down__cue { border-radius: 0; }

/* 素材搬进探测窗之后新露出来的那批圆角（全站扫了 7 个项目） */
body.is-read :is(.rsec, .pv__slide) :is(
  .feat__ico, .shot__box, .setup__img, .flow-step, .flow-step__img,
  .ba-item__img, .is-wincol
) { border-radius: 0 !important; }

/* —— 窄屏阅读态：太空层静止 ——
   手机上滑动正文时，底下那层「出舱 / 跃迁」的东西会被蹭出动效，
   看上去像在正文里随机穿越了一下。读长文的时候它没有任何用处，
   所以窄屏进了项目页就把这几件收起来、其余一律停住。 */
@media (max-width: 1024px) {
  body.is-read #sp-warp,
  body.is-read #sp-intro,
  body.is-read #sp-glass,
  body.is-read #sp-limb { display: none !important; }
  body.is-read #sp-map,
  body.is-read #sp-map *,
  body.is-read #sp-horizon,
  body.is-read #sp-horizon * {
    animation: none !important;
    transition: none !important;
  }
}