/* css/topics.css：话题＝这条对话的目录＋右缘刻度条（10-29 并入，js/topics.js）。目录行、待确认角标、目录浮层、搜索结果、玻璃、刻度条、悬停卡、「回到最新」
   照会话话题原型 docs/prototypes/2026-10-28-团团长期陪跑会话模式/css/modes.css（目录行与浮层 17179ee7，刻度条 44015d96 第八轮居中版）逐条搬来，
   类名不改（md-*），方便两边对照；只有栏头外壳与对话区让位是本原型自己的。
   颜色、圆角、阴影、字号全走令牌；琥珀色只给「等你确认」。 */

/* ── 栏头一行：猫＋目录行＋角标＋关键决定入口（原来的「团团 · 项目名」与状态行去掉：状态里的待确认由角标表达） ── */
.tt-sb-head.md-top { gap: 4px; min-height: 52px; padding: 6px 10px 6px 8px; }
.tt-sb-head .tt-sb-cat { width: 32px; height: 32px; margin-right: 2px; }
.tt-sb-head > [hidden] { display: none !important; }
.md-toc-empty { flex: 1; }
.md-tr-dec { padding: 0; font: inherit; color: var(--b-text-1); white-space: nowrap; }
.md-tr-dec:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── 对话区：目录浮层、刻度条、悬停卡、「回到最新」都压在它上面；右边让出 36px 给刻度条（正文 368 → 350px；本原型团团栏 420 宽，交接里写的 384 → 366 是按旧内边距算的） ── */
.tt-sb-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tt-sb-stage > .tt-sb-scroll { padding-right: 36px; }

/* ── 栏头目录行：默认收起，一行「话题名 · 共 N 个话题 ▾」；有待确认时右边带角标「● P3」（10-29 评审 I2：去掉「当前：」，角标缩短，全称在 title 与目录里） ── */
.md-toc { flex: 1; min-width: 0; display: inline-flex; align-items: center; height: 32px; padding: 0 8px 0 10px; border-radius: var(--b-radius-chip); font-size: var(--b-fs-13); text-align: left; color: var(--b-text-3); white-space: nowrap; }
.md-toc:hover, .md-toc[aria-expanded="true"] { background: var(--b-neutral-tint); }
.md-toc-ic { flex: none; width: 15px; height: 15px; margin-right: 6px; color: var(--b-text-3); }
.md-toc:hover .md-toc-ic, .md-toc[aria-expanded="true"] .md-toc-ic { color: var(--b-text-2); }
.md-toc-n { min-width: 0; font-weight: 600; color: var(--b-text-1); overflow: hidden; text-overflow: ellipsis; }
.md-toc-c { flex: none; display: inline-flex; align-items: center; margin-left: .3em; }
.md-toc-c .fb-odo { display: inline-block; height: 18px; margin: 0 .3em; overflow: hidden; font-family: var(--b-font-num); }
.md-toc-chev { flex: none; width: 14px; height: 14px; margin-left: 4px; transition: transform var(--m-snappy-t) var(--m-spring-snappy); }
.md-toc[aria-expanded="true"] .md-toc-chev { transform: rotate(180deg); }
.md-toc-p { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: var(--b-radius-pill); }
.md-toc-p:hover { background: var(--b-neutral-tint); }
.md-toc-p .md-badge, .md-tr .md-badge, .md-tip-p .md-badge { flex: none; font-size: var(--b-fs-12); white-space: nowrap; }
/* 关键决定入口（定稿场景 9 A 的 .s9-entry 原样）：栏头一行三样里它不让位，话题名先截断 */
.md-top .s9-entry { flex: none; margin-left: 2px; cursor: pointer; transition: background-color var(--m-snappy-t) var(--m-spring-snappy); }
.md-top .s9-entry:hover { background: var(--b-neutral-tint); }
.md-top .s9-entry:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--b-text-2); }
.md-top.is-tight .md-toc-c { display: none; }   /* 放不下时先收「· 共 N 个话题」，再截断话题名（js/topics.js fitTop） */
.md-toc-empty { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--b-fs-12); color: var(--b-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-top .md-toc-empty b { flex: none; font-size: var(--b-fs-13); }

/* ── 目录浮层：压在对话上（不推开对话），只盖对话区，输入框露在外面 ── */
.md-pop-catch { position: absolute; inset: 0; z-index: 4; }
.md-pop { position: absolute; z-index: 5; top: 6px; bottom: 6px; left: 8px; right: 8px; display: flex; flex-direction: column; }   /* 高度固定为对话区高（10-29 评审 I3：搜索时不忽高忽低）；底与影走 .md-solid */
.md-pop-h { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; }
.md-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--b-radius-chip); background: var(--b-bg-input); box-shadow: inset 0 0 0 1px var(--b-line); cursor: text; }
.md-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--b-focus); }   /* 同 vendor .field:focus */
.md-search .ic { flex: none; width: 14px; height: 14px; color: var(--b-text-3); }
.md-q { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; font: inherit; font-size: var(--b-fs-13); color: var(--b-text-1); background: none; outline: none; }
.md-q::placeholder { color: var(--b-text-3); }
.md-q:focus, .md-q:focus-visible { outline: none; box-shadow: none; }   /* 焦点环交给外层 .md-search:focus-within（10-29 评审 S1） */
.md-q::-webkit-search-cancel-button, .md-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.md-q-x { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -4px; border-radius: var(--b-radius-pill); color: var(--b-text-3); }
.md-q-x[hidden] { display: none; }
.md-q-x:hover { color: var(--b-text-1); background: var(--b-neutral-tint); }
.md-search .md-q-x .ic { width: 12px; height: 12px; color: inherit; }
.md-add { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 32px; padding: 0 10px 0 8px; border-radius: var(--b-radius-chip); font-size: var(--b-fs-13); font-weight: 500; color: var(--b-text-1); box-shadow: inset 0 0 0 1px var(--b-line-strong); white-space: nowrap; }
.md-add:hover { background: var(--b-neutral-tint); }
.md-add:disabled { color: var(--b-text-3); background: none; box-shadow: inset 0 0 0 1px var(--b-line); }
.md-add .ic { width: 14px; height: 14px; }
.md-pop-b { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 6px 8px; scrollbar-width: thin; }
.md-pop-b.is-down { -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
.md-pop-b.is-up { -webkit-mask-image: linear-gradient(transparent, #000 24px); mask-image: linear-gradient(transparent, #000 24px); }
.md-pop-b.is-up.is-down { -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.md-pop-k { padding: 6px 6px 4px; font-size: var(--b-fs-12); line-height: 1.5; color: var(--b-text-3); }
.md-trs { display: grid; gap: 2px; }
.md-tr { position: relative; display: grid; gap: 1px; padding: 6px 8px 7px; border-radius: var(--b-radius-chip); cursor: pointer; }
.md-tr:hover { background: var(--b-neutral-tint); }
.md-tr:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--b-text-2); }
.md-tr.is-cur { background: var(--b-bg-inset); box-shadow: inset 0 1px 1.5px var(--b-crease), inset 0 -1px 0 var(--b-card-edge); }   /* 当前话题：和刻度条的槽一样压进纸里 */
.md-tr.is-cur::before { content: ""; position: absolute; left: 0; top: 10px; width: 3px; height: 14px; border-radius: var(--b-radius-pill); background: var(--b-text-2); }
.md-tr-1 { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 22px; }
.md-tr-n { min-width: 0; font-size: var(--b-fs-13); font-weight: 600; line-height: 1.5; color: var(--b-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tr-sp { flex: 1; }
.md-tr-d { flex: none; font-size: var(--b-fs-12); color: var(--b-text-3); }
.md-tr-e { font-size: var(--b-fs-12); line-height: 1.5; color: var(--b-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tr .md-pen { opacity: 0; transition: opacity var(--m-fast) var(--m-ease-out); }
.md-tr:hover .md-pen, .md-tr.is-cur .md-pen, .md-tr .md-pen:focus-visible { opacity: 1; }
.md-tr.is-ghost .md-tr-n { font-weight: 500; color: var(--b-text-2); }
.md-tr.is-ghost .md-tr-e { color: var(--b-text-3); }
.md-tr .md-rename { flex: 1; height: 26px; margin: -2px 0 -2px -6px; padding: 0 6px; }
.md-pen { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: -2px 0; border-radius: var(--b-radius-pill); color: var(--b-text-3); }
.md-pen:hover { color: var(--b-text-1); background: var(--b-neutral-tint); }
.md-pen .ic { width: 13px; height: 13px; }
/* 搜索结果 */
.md-hits { display: grid; margin-top: 2px; }
.md-hits-h { display: block; width: 100%; padding: 8px 6px 2px; border-radius: var(--b-radius-chip); font-size: var(--b-fs-12); line-height: 1.5; text-align: left; color: var(--b-text-3); }
button.md-hits-h:hover { background: var(--b-neutral-tint); }
.md-hits-h b { font-size: var(--b-fs-13); font-weight: 600; color: var(--b-text-1); }
.md-hit-i { display: grid; gap: 1px; width: 100%; padding: 6px 6px 7px; border-radius: var(--b-radius-chip); text-align: left; }
.md-hit-i:hover { background: var(--b-neutral-tint); }
.md-hit-i small { font-size: var(--b-fs-12); line-height: 1.5; color: var(--b-text-3); }
.md-hit-i span { font-size: var(--b-fs-13); line-height: 1.55; color: var(--b-text-1); }
.md-mark { padding: 0 1px; border-radius: var(--b-radius-chip); color: inherit; background: var(--b-primary-tint); }

/* ── 实底：目录浮层与悬停卡（10-29 评审 I3：原来是玻璃，团团栏自己已带 backdrop，嵌在里面的模糊不生效，下面的正文清清楚楚透上来；
   改成纸面卡片的实底加阴影，不叠玻璃） ── */
.md-solid { border-radius: var(--b-radius-inner); background: var(--b-bg-card); box-shadow: inset 0 0 0 1px var(--b-line), inset 0 1px 0 var(--b-card-edge), 0 2px 6px var(--b-card-shadow), 0 16px 36px -14px var(--b-card-shadow-far); }
.md-glow { position: absolute; inset: 0; border-radius: inherit; background: var(--b-primary-tint); pointer-events: none; }
.md-rename { flex: 1; min-width: 0; height: 30px; margin-left: -8px; padding: 0 8px; border-radius: var(--b-radius-chip); font: inherit; font-size: var(--b-fs-13); font-weight: 600; color: var(--b-text-1); background: var(--b-bg-input); box-shadow: inset 0 0 0 1px var(--b-line-strong); outline: none; }
.md-rename:focus, .md-rename:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--b-focus); }   /* 同 vendor .field:focus */

/* ── 刻度条（白晨 10-29 选 A 细线）：没有轨道，一种基本形（短横线），整列在对话区里垂直居中（白晨 10-29 第八轮：学 Codex 居中），一根墨线随滚动滑过。
   长短与明暗都由变量算：--len 基础长短、--op 基础明暗、--near 指针靠近时整列抬到的明暗（这三个按类名变，注册成数字、用弹簧过渡）；
   --m 指针远近（0～1，JS 用弹簧逐帧给，略带回弹）、--mk 加深（m²，只有指着的那格和紧邻的变成墨色）、--vis 收起的轮次露出多少、--dy 放大镜挪的位置。
   只动 transform 与 opacity。放大到头（长度 1）右缘 4px＋22px＝26px，回弹最多再长 2px，离正文仍有 8px 以上 ── */
@property --len { syntax: '<number>'; inherits: true; initial-value: .3; }
@property --op { syntax: '<number>'; inherits: true; initial-value: .32; }
@property --near { syntax: '<number>'; inherits: true; initial-value: 0; }
.md-rail { position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; width: 36px; cursor: pointer; --tw: 22px; --tr: 4px; --near: 0; transition: --near var(--m-snappy-t) var(--m-spring-snappy); }
.tt-sb-stage:has(.md-pop) .md-rail { opacity: 0; pointer-events: none; }   /* 浮层开着时刻度条让开 */
.md-rail.is-near { --near: .5; }   /* 指针一靠近，整列先亮一档 */
.md-tk { position: absolute; left: 0; right: 0; height: 0; --len: .25; --op: .32; --m: 0; --mk: 0; --vis: 1;
  transform: translateY(var(--dy, 0px)); transition: transform 90ms linear; }   /* 指针在上面：放大镜只留 90ms 的跟随 */
.md-rail.is-rel .md-tk { transition: transform var(--m-smooth-t) var(--m-spring-smooth); }   /* 离开：弹簧收回 */
/* 变成当前那格时长短、明暗用弹簧过渡；只挂在当前那格上——上千格都挂过渡时，每次重算样式都要逐格检查，扫刻度条会出长任务（原型实测） */
.md-tk.is-cur { transition: transform 90ms linear, --len var(--m-snappy-t) var(--m-spring-snappy), --op var(--m-snappy-t) var(--m-spring-snappy); }
.md-rail.is-rel .md-tk.is-cur { transition: transform var(--m-smooth-t) var(--m-spring-smooth), --len var(--m-snappy-t) var(--m-spring-snappy), --op var(--m-snappy-t) var(--m-spring-snappy); }
.md-tk.is-first { --len: .42; --op: .55; }
.md-tk.is-ev { --len: .16; }
.md-tk.is-ghost { --op: .2; }
/* 一个话题一格：话题头当平常的格子，每周第一个话题长一档；话题里的各轮收起（--v 由放大镜给，格距 4px 起淡入、6px 全亮） */
.md-rail[data-lvl="1"] .md-tk.is-first { --len: .25; --op: .36; }
.md-rail[data-lvl="1"] .md-tk.is-wk { --len: .42; --op: .6; }
.md-tk.is-in { --len: .16; --op: .3; --vis: var(--v, 0); }
.md-tk.is-pend { --len: .42; --op: 1; --vis: 1; }
.md-tk.is-cur { --len: .55; --op: .9; }
/* 按比例缩到 6px 以内（或上百个话题时）：平常的格子退成很淡的细纹，只留组首、当前与待确认清楚；放大镜把附近拉开 */
.md-rail[data-lvl="0"][data-dense] .md-tk:not(.is-first, .is-cur, .is-pend) { --op: .16; }
.md-rail[data-lvl="1"][data-dense] .md-tk.is-first:not(.is-wk, .is-cur, .is-pend) { --op: .16; }
.md-rail[data-dense].is-near { --near: .3; }
/* 程序坞：指着的那格最长（26px）、最粗（2px → 3.6px）、最深（墨色），相邻几格依次递减；--m 由 JS 的弹簧逐帧写，所以这里不再加过渡 */
.md-tk-b { position: absolute; right: var(--tr); top: -1px; width: var(--tw); height: 2px; border-radius: var(--b-radius-pill); background: var(--b-text-3); transform-origin: 100% 50%;
  transform: scaleX(calc(var(--len) + (1 - var(--len)) * var(--m))) scaleY(calc(1 + .8 * var(--m)));
  opacity: calc((max(var(--op), var(--near)) + (1 - max(var(--op), var(--near))) * var(--m)) * var(--vis)); }
.md-tk.is-lit .md-tk-b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--b-text-1); opacity: var(--mk); }   /* 只给正在放大的几格（JS 加 is-lit），免得上千格各带一层 */
.md-rail[data-lvl="0"][data-dense] .md-tk-b { height: 1px; top: -.5px; transform: scaleX(calc(var(--len) + (1 - var(--len)) * var(--m))) scaleY(calc(1 + 2.6 * var(--m))); }
.md-tk.is-cur .md-tk-b { background: var(--b-text-2); }
.md-tk.is-pend .md-tk-b { background: var(--cc-need); }   /* 琥珀色只给待确认 */
.md-tk.is-pend .md-tk-b::after { display: none; }   /* 待确认那格放大时仍是琥珀，不加深成墨色 */
/* 当前位置：一根墨线，随滚动连续地滑（JS 每帧给 translateY，这里只做 180ms 的跟随平滑）；外圈一道纸色，把压在下面的格子切开 */
.md-ind { position: absolute; display: block; pointer-events: none; top: 0; right: var(--tr); width: 12px; height: 2px; margin-top: -1px; border-radius: var(--b-radius-pill);
  background: var(--b-text-1); opacity: .72; box-shadow: 0 0 0 2px var(--b-bg-card); transition: transform 180ms var(--m-ease-out); }
.md-ind.is-still { transition: none; }

/* 悬停卡：实底（.md-solid），在刻度条左边。外层只管上下位置（跟着所指的那格用弹簧滑过去），里层管出场；小尖角对准那一格 */
.md-tip { position: absolute; z-index: 3; top: 0; right: 38px; width: 268px; pointer-events: none; }   /* 上下位置由 JS 的弹簧逐帧给（和刻度的放大同一套），这里不加过渡 */
.md-tip.is-still, .md-tip.is-still .md-tip-in::after { transition: none; }
.md-tip-in { position: relative; padding: 10px 14px 12px; opacity: 0; transform: translateX(6px) scale(.97); transform-origin: 100% var(--ay, 50%);
  transition: opacity 200ms var(--m-ease-out), transform var(--m-snappy-t) var(--m-spring-snappy); }
.md-tip.is-on .md-tip-in { opacity: 1; transform: none; }
.md-tip-in::after { content: ""; position: absolute; right: -6px; top: 0; width: 7px; height: 14px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--b-bg-card); transform: translateY(calc(var(--ay, 24px) - 7px)); }   /* 尖角每帧按卡片现在的位置对准那一格，和卡片一起滑 */
.md-tip-h { display: flex; align-items: baseline; gap: 8px; font-size: var(--b-fs-12); line-height: 1.5; color: var(--b-text-3); }
.md-tip-h b { min-width: 0; font-weight: 600; color: var(--b-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tip-d { flex: none; margin-left: auto; font-family: var(--b-font-num); }
.md-tip-you { margin-top: 5px; font-size: var(--b-fs-13); font-weight: 600; line-height: 1.55; color: var(--b-text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-tip-say { margin-top: 4px; font-size: var(--b-fs-12); line-height: 1.65; color: var(--b-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.md-tip-end { margin-top: 5px; font-size: var(--b-fs-13); line-height: 1.55; color: var(--b-text-1); text-wrap: pretty; }
.md-tip-p { margin-top: 8px; }

/* 回到最新：离开底部才出现，居中（右缘是刻度条） */
.md-fab { position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; width: max-content; height: 30px; margin: 0 auto; padding: 0 12px 0 10px; border-radius: var(--b-radius-pill); font-size: var(--b-fs-12); font-weight: 600; color: var(--b-text-1); background: var(--b-bg-card); box-shadow: inset 0 0 0 1px var(--b-line-strong), 0 8px 18px -10px var(--b-card-shadow-far); }
.md-fab[hidden] { display: none; }
.md-fab .ic { width: 14px; height: 14px; }