/* ============================================================
   成长与能力（/growth）——页面样式。照 docs/site-design.md：面分层，卡片是面，不画四边框；线只给数据。
   颜色和全站一样：灰阶的面与墨色，信号橙一屏一处（选中的能力、关键刻度）。不按能力分组上色：
   分组靠留缝和组名表达（Owner 2026-10-20：官网不要花花绿绿，和 Artifact 不同）。
   插图（首屏、每天、结尾）是生成的柔和 3D 场景，透明底，放在一块 --surface 面上，与 About 首屏同一种做法。
   ============================================================ */

/* 能力名小胶囊 */
.gw-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--raised); box-shadow: var(--ring); font-size: 0.8125rem; font-weight: 500; color: var(--ink-strong); white-space: nowrap; }

/* ---------- 五种类型 ---------- */
.gt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.gt-type { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 22px 20px 20px; border-radius: 22px; background: var(--surface); }
.gt-type h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.gt-type p { font-size: 0.9375rem; line-height: 1.65; color: var(--mut); }
.gt-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.hd .gt-all { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 0.9375rem; color: var(--mut); }
.hd .gt-all > span:first-child { margin-right: 4px; }

/* ---------- 能力地图：舞台（面）+ 左边能力轮 + 右边白卡详情；下面按组的名字按钮 ---------- */
.gw-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(18px, 3vw, 40px); border-radius: var(--radius-xl); background: var(--surface); }
.gw-left { display: grid; gap: 12px; min-width: 0; }
.gw-wheel { width: 100%; max-width: 540px; justify-self: center; overflow: visible; }
.gw-seg { cursor: pointer; outline: none; transform-box: view-box; transform-origin: 0 0; transition: transform 0.18s var(--ease-out); }
.gw-seg path { fill: color-mix(in srgb, var(--ink) 18%, var(--surface)); transition: fill 0.18s; }
.gw-seg.is-core path { fill: color-mix(in srgb, var(--ink-strong) 58%, var(--surface)); }
.gw-seg.gw-base path { fill: var(--raised); }
.gw-seg:hover path { fill: color-mix(in srgb, var(--ink-strong) 86%, var(--surface)); }
.gw-seg:not(.is-core):not(.gw-base):hover path { fill: color-mix(in srgb, var(--ink) 34%, var(--surface)); }
.gw-seg.gw-base:hover path { fill: var(--raised-hover); }
/* 选中：墨色实底 + 一圈细信号橙，不放大（Owner 2026-10-20：橙色的框不好看） */
.gw-seg.is-pick path, .gw-seg.is-pick:hover path { fill: var(--ink-strong); stroke: var(--signal); stroke-width: 2.5; stroke-linejoin: round; }
.gw-seg text { font-family: var(--font-body); font-size: 13px; fill: var(--mut); pointer-events: none; }
.gw-seg.is-core text, .gw-seg.gw-base text { font-weight: 600; fill: var(--ink-strong); }
.gw-seg.is-pick text { font-weight: 700; fill: var(--ink-strong); }
.gw-seg.gw-base.is-pick text { fill: var(--raised); }
.gw-seg:focus-visible path { stroke: var(--focus); stroke-width: 3; }
/* About 用的链接形态：去掉链接下划线，键盘焦点同上 */
a.gw-seg { text-decoration: none; }
a.gw-seg:focus-visible { outline: none; }
.gw-mid { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; fill: var(--mut); pointer-events: none; }
.hd .gw-legend { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--mut); }

.gw-groups { display: grid; gap: 10px; margin-top: 18px; }
.gw-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gw-group-name { width: 4.5rem; flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--mut); }
.gw-name { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fill); color: var(--ink); font: inherit; font-size: 0.875rem; cursor: pointer; }
.gw-name.is-core { font-weight: 600; color: var(--ink-strong); }
.gw-name:hover { background: var(--fill-hover); }
.gw-name[aria-pressed="true"] { background: var(--raised); color: var(--ink-strong); font-weight: 600; box-shadow: var(--ring), var(--elev-2); }
.gw-name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.gw-detail { display: grid; gap: 16px; align-content: start; min-width: 0; min-height: 520px; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--ring), var(--elev-2); }
.gw-hint { color: var(--mut); }
.gw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--fill); font-size: 0.75rem; font-weight: 600; color: var(--ink); }
.gw-tag--core { background: var(--signal-soft); color: var(--signal-ink); }
.gw-detail h3 { font-size: clamp(1.75rem, 2.8vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
.hd .gw-one { margin-top: -6px; font-size: 1.0625rem; color: var(--mut); }
.gw-tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; padding: 3px; overflow-x: auto; border-radius: 999px; background: var(--fill); }
.gw-tab { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--mut); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.gw-tab[aria-selected="true"] { background: var(--raised); color: var(--ink-strong); box-shadow: var(--elev-1); }
.gw-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.gw-body { display: grid; gap: 14px; }
.hd .gw-what { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-strong); }
.gw-k { font-size: 0.8125rem; font-weight: 600; color: var(--mut); }
.gw-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fill); font-size: 0.8125rem; color: var(--ink-strong); }
/* 「不是什么」：一行灰面，前面一个小叉 */
.gw-not { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); }
.gw-not svg { width: 22px; height: 22px; color: var(--mut-2); }
.gw-not b { display: block; margin-bottom: 2px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-strong); }
.gw-not span { font-size: 0.9375rem; line-height: 1.6; color: var(--mut); }
/* 各级样子：级别是灰色胶囊，右边是一行行灰面，越往上越长、越深 */
.gw-levels { display: grid; gap: 8px; }
.gw-lv { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; }
.gw-lv em { display: grid; place-items: center; height: 36px; border-radius: 999px; background: var(--fill); font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gw-lv span { display: flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--ink) calc(var(--t) * 1%), var(--surface)); font-size: 0.875rem; line-height: 1.45; color: var(--ink-strong); box-sizing: border-box; }
.gw-sigs, .gw-ups { display: grid; gap: 8px; }
.gw-sig, .gw-up { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 11px 14px; border-radius: var(--radius-md); background: var(--surface); font-size: 0.9375rem; line-height: 1.45; }
.gw-sig svg { width: 18px; height: 18px; color: var(--mut); }
.gw-up svg { width: 18px; height: 18px; color: var(--signal); }
.gw-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gw-bar { display: grid; gap: 6px; justify-items: center; font-size: 0.75rem; color: var(--mut); text-align: center; }
.gw-bar div { position: relative; width: 100%; height: 52px; overflow: hidden; border-radius: 10px; background: var(--fill); }
.gw-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 10px; background: color-mix(in srgb, var(--ink-strong) 58%, var(--surface)); }
.hd .gw-note { font-size: 0.8125rem; color: var(--mut); }

/* ---------- 各序列侧重：灰阶热力图 ---------- */
.hd .gh-title { margin-bottom: 18px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.gh-wrap { overflow-x: auto; }
.gh { display: grid; grid-template-columns: minmax(8rem, 1.4fr) repeat(5, minmax(3rem, 1fr)); gap: 4px; min-width: 34rem; max-width: 56rem; font-size: 0.875rem; }
.gh-h { padding: 4px; font-size: 0.8125rem; font-weight: 600; text-align: center; color: var(--mut); }
.gh-n { display: flex; align-items: center; padding-right: 8px; white-space: nowrap; color: var(--ink); }
.gh-c { height: 26px; border-radius: 8px; background: var(--surface); }
.gh-c.w1 { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.gh-c.w2 { background: color-mix(in srgb, var(--ink) 30%, var(--surface)); }
.gh-c.w3 { background: color-mix(in srgb, var(--ink-strong) 58%, var(--surface)); }

/* ---------- 职级 ---------- */
.gl-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
.gl-band { display: grid; gap: 6px; align-content: end; padding: 20px; border-radius: 22px; background: color-mix(in srgb, var(--ink) var(--t), var(--surface)); }
.gl-band em { font-style: normal; font-size: 0.8125rem; font-weight: 600; color: var(--mut); font-variant-numeric: tabular-nums; }
.gl-band b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-strong); }
.gl-band span { font-size: 0.875rem; line-height: 1.6; color: var(--mut); }
.gl-band.b1 { --t: 0%; min-height: 150px; }
.gl-band.b2 { --t: 3%; min-height: 190px; }
.gl-band.b3 { --t: 6%; min-height: 230px; }
.gl-band.b3 em { color: var(--signal-ink); } /* 5 级 = 职业级 */
.gl-band.b4 { --t: 9%; min-height: 270px; }
.gl-band.b5 { --t: 12%; min-height: 310px; }
.hd .gl-h3 { margin: clamp(48px, 5vw, 64px) 0 16px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.gl-tracks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gl-track { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 22px; background: var(--surface); }
.gl-track b { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 600; }
.gl-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--raised); box-shadow: var(--ring), var(--elev-1); font-size: 0.875rem; font-weight: 700; color: var(--ink-strong); }
.gl-track p { font-size: 0.875rem; line-height: 1.6; color: var(--mut); }
.gl-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: end; }
.gl-time { min-width: 0; }
.hd .gl-time > .gl-h3 { margin-bottom: 20px; }
.gl-trow, .gl-axis { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 11rem; gap: 12px; align-items: center; font-size: 0.875rem; }
.gl-trow { margin-bottom: 10px; }
.gl-trow b { font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-trow > span { color: var(--mut); font-variant-numeric: tabular-nums; }
.gl-track-bar { position: relative; height: 16px; border-radius: 999px; background: var(--surface); }
.gl-band-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 30%, var(--surface)); }
.gl-min { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink-strong); }
.gl-axis { font-size: 0.75rem; color: var(--mut-2); }
.gl-axis > div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.hd .gl-note { margin-top: 16px; font-size: 0.875rem; line-height: 1.65; color: var(--mut); }
.gl-rules { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: gl; }
.gl-rules li { position: relative; padding: 20px 20px 20px 60px; border-radius: 22px; background: var(--surface); font-size: 1rem; line-height: 1.55; color: var(--ink-strong); counter-increment: gl; }
.gl-rules li::before { content: counter(gl, decimal-leading-zero); position: absolute; left: 20px; top: 21px; font-size: 0.875rem; font-weight: 600; color: var(--mut); font-feature-settings: "tnum" 1; }

/* ---------- 每天的成长：左图右步骤 ---------- */
.gd-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.gd-art img { width: 100%; height: auto; }
.gd-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gd-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 18px 20px; border-radius: 22px; background: var(--surface); }
.gd-n { grid-row: span 2; font-size: 0.875rem; font-weight: 600; color: var(--mut); font-feature-settings: "tnum" 1; padding-top: 2px; }
.gd-step b { font-size: 1.05rem; font-weight: 600; color: var(--ink-strong); }
.gd-step p { font-size: 0.9375rem; line-height: 1.6; color: var(--mut); }

/* 每日成长报告（示例）：一张浮起的白卡，全部由代码画；信号橙只给进度环和本周那一根柱子 */
.gd-rep { display: grid; gap: 12px; align-content: start; margin: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--ring), var(--elev-2); }
.gd-rep-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.gd-rep-head b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.gd-rep-ring { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); }
.gd-rep-ring svg { flex: none; width: 76px; height: 76px; }
.gd-rep-ring circle { fill: none; stroke: var(--fill); stroke-width: 4; }
.gd-rep-ring .gd-arc { stroke: var(--signal); stroke-linecap: round; }
.gd-rep-ring text { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; fill: var(--ink-strong); }
.gd-rep-ring div { display: grid; gap: 4px; }
.gd-rep-ring b { font-size: 1rem; font-weight: 600; color: var(--ink-strong); }
.gd-rep-ring span { font-size: 0.875rem; color: var(--mut); }
.gd-rep-trend { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface); }
.gd-rep-trend svg { width: 100%; height: auto; }
.gd-rep-trend rect { fill: color-mix(in srgb, var(--ink) 26%, var(--surface)); }
.gd-rep-trend rect.gd-now { fill: var(--signal); }
.gd-rep-trend span { font-size: 0.875rem; color: var(--mut); }

/* 状态胶囊：已上线 / 规划中（规范 §5） */
.pill { display: inline-flex; align-items: center; width: fit-content; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pill--live { background: var(--leaf-soft); color: var(--leaf); }
.pill--plan { background: var(--fill); color: var(--mut-2); }

/* ---------- 系统：三块面 + 箭头，中间 Semantic 是浮起的白卡 ---------- */
.gs-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.gs-box { display: grid; gap: 8px; justify-items: center; align-content: start; padding: 26px 22px; border-radius: var(--radius-xl); background: var(--surface); text-align: center; }
.gs-box b { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.gs-box p { font-size: 0.9375rem; line-height: 1.6; color: var(--mut); }
.gs-core { padding-block: 36px; background: var(--raised); box-shadow: var(--ring), var(--elev-2); }
.gs-arrow { display: grid; justify-items: center; gap: 6px; font-size: 0.8125rem; color: var(--mut); }
.gs-arrow svg { width: 48px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd .gs-cli { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 0.9375rem; color: var(--mut); }
.gs-cli code { padding: 4px 10px; border-radius: 8px; background: var(--surface); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink); }

/* ---------- 我们想找的人（sp-princ / sp-pr 是全站组件）---------- */
.hd .gj-cta { margin-top: 32px; }

/* ---------- 结尾：一块面，团队插图在上 ---------- */
.ge-end { display: grid; justify-items: center; gap: 4px; padding: clamp(32px, 5vw, 64px) 24px clamp(48px, 6vw, 80px); border-radius: var(--radius-xl); background: var(--surface); text-align: center; }
.ge-end img { width: min(640px, 100%); height: auto; margin-bottom: 12px; }
.hd .ge-end .hd-sub { margin-inline: auto; }
.hd .ge-end .btn-row { justify-content: center; margin-top: 24px; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1080px) {
  .gt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gw-stage, .gl-two, .gd-two { grid-template-columns: minmax(0, 1fr); }
  .gw-detail { min-height: 0; }
  .gs-flow { grid-template-columns: minmax(0, 1fr); }
  .gs-arrow svg { transform: rotate(90deg); }
  .gl-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-band { min-height: 0 !important; }
}
@media (max-width: 620px) {
  .gt-grid, .gl-tracks, .gl-bands { grid-template-columns: minmax(0, 1fr); }
  .gw-group-name { width: 100%; }
  .gl-trow, .gl-axis { grid-template-columns: 3rem minmax(0, 1fr); }
  .gl-trow > span { grid-column: 2; margin-top: -6px; }
  .gl-axis > span:last-child { display: none; }
  .gw-lv { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .gw-seg, .gw-seg path { transition: none; } }