/* p-assessment.css — 组织 AI 成熟度自测与课前测评（/assessment/，v2，2026-10-09）。全站组件在 fyro.css，计分和结果在 /assessment.js。
 * 01 自测：10 道题放进一扇窗（.window.assess-window），窗脚是提交行（.assess-dock），有脚本时答题时贴在屏幕底边
 *   （窗用 overflow: clip，不用 hidden：hidden 会让窗变成滚动容器，sticky 就只贴窗、不贴屏幕）。
 *   结果也是一扇窗：总分、所处阶段、刻度、得分最低的几项、各题得分，下半截是预约邮件。
 *   assessment.js 只在 html.motion-active 时播出场动画；v2 不加载 motion.js，结果直接是最终的样子（不做入场动画，同全站约定）。
 * 02 课前测评：v0.24 起收成一小节（.assess-brief，样式在文件末尾）；下面「一至八」那几段样式留着没删。03 常见问题：左标题、右 details。
 * 10-27 删废话：各节编号小标删了，节标题顶格；结果窗下半截只剩两个按钮（小标题和一句说明删了，样式一起删）。
 */

/* ---------- 首屏 ---------- */
.page-hero .page-lead { max-width: 38em; }
.sec-head .sec-title:first-child { margin-top: 0; }   /* 10-27 删掉各节的编号小标以后，节标题顶格 */
.i-down { rotate: 90deg; }

/* ---------- 01 自测：导语和计分说明 ---------- */
.assess-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; margin-bottom: clamp(36px, 4vw, 56px); }
.assess-intro > p { max-width: 36em; font-size: 15.5px; line-height: 1.95; color: var(--ink-soft); }
.assess-facts { border-top: 1px solid var(--line-2); }
.assess-facts li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.assess-facts b { color: var(--ink); }
@media (max-width: 899px) { .assess-intro { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 题目窗 ---------- */
.assess-window { overflow: clip; }
.assess-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.assess-qs { padding-inline: clamp(18px, 3vw, 34px); }
.assess-q { min-width: 0; margin: 0; padding: clamp(22px, 2.6vw, 30px) 0; border: 0; border-bottom: 1px solid var(--line); }
.assess-q:last-child { border-bottom: 0; }
.assess-q legend { position: relative; float: left; width: 100%; margin-bottom: 16px; padding: 0 0 0 44px; font-size: 16.5px; font-weight: var(--w-title); line-height: 1.65; letter-spacing: var(--track-tight); color: var(--ink); }
.assess-q-num { position: absolute; top: 0.28em; left: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); transition: color 200ms ease; }
.assess-q:has(input:checked) .assess-q-num { color: var(--accent-text-sm); }
.assess-q.is-missing .assess-q-num { color: var(--accent-text-sm); }
.assess-q.is-missing legend::after { content: "尚未作答"; display: inline-block; margin-left: 10px; padding: 0 9px; border: 1px solid rgb(var(--accent-rgb) / 0.4); border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 0.04em; vertical-align: 2px; color: var(--accent-text-sm); }

.assess-options { clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; padding-left: 44px; }
.assess-option { position: relative; display: flex; }
.assess-option > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.assess-option > span { position: relative; display: flex; align-items: center; width: 100%; min-height: 52px; padding: 11px 14px 11px 42px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--sheet-hi); box-shadow: inset 0 1px 0 var(--key-paper-hi), 0 1px 2px rgb(var(--shadow-rgb) / 0.05); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out, color 160ms ease-out; }
.assess-option > span::before { content: ""; position: absolute; top: 50%; left: 15px; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid rgb(var(--ink-rgb) / 0.38); border-radius: 50%; background: var(--field); transition: border-color 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out; }
.assess-option > input:checked + span { border-color: rgb(var(--accent-rgb) / 0.55); background: rgb(var(--accent-rgb) / 0.045); box-shadow: inset 0 0 0 0.5px rgb(var(--accent-rgb) / 0.4), 0 1px 2px rgb(var(--shadow-rgb) / 0.05); color: var(--ink); }
.assess-option > input:checked + span::before { border-color: var(--cinnabar); background: var(--cinnabar); box-shadow: inset 0 0 0 3.5px #fff; }
.assess-option > input:focus-visible + span { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.assess-q.is-missing .assess-option > span { border-color: rgb(var(--accent-rgb) / 0.4); }
@media (hover: hover) and (pointer: fine) {
  .assess-option:hover > span { border-color: rgb(var(--ink-rgb) / 0.34); }
  .assess-option:hover > input:checked + span { border-color: rgb(var(--accent-rgb) / 0.7); }
}
@media (max-width: 767px) {
  .assess-q legend { padding-left: 34px; }
  .assess-options { padding-left: 0; }
}
@media (max-width: 559px) {
  .assess-options { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .assess-option > span { min-height: 48px; }
}

/* 提交行（窗脚）：没有脚本时整条不显示；有脚本时贴在屏幕底边，走完表单回到窗脚 */
.assess-dock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; padding: 14px clamp(18px, 3vw, 34px); border-top: 1px solid var(--line); background: rgb(var(--paper-rgb) / 0.55); }
html:not(.js) .assess-dock { display: none; }
html.js:has(.assess-dock) { scroll-padding-bottom: 104px; }   /* 键盘移到被提交行挡住的选项时，滚到提交行上面 */
html.js .assess-dock { position: sticky; bottom: 0; z-index: 6; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); background: rgb(var(--paper-rgb) / 0.88); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.assess-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.assess-progress { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.assess-progress b { font-weight: 600; color: var(--ink); }
.assess-cells { display: inline-flex; gap: 3px; margin-left: 14px; vertical-align: 1px; }
.assess-cells i { width: 13px; height: 6px; border-radius: 2px; background: rgb(var(--ink-rgb) / 0.14); transition: background-color 250ms ease; }
.assess-form:has([name="q1"]:checked) .assess-cells i:nth-child(1), .assess-form:has([name="q2"]:checked) .assess-cells i:nth-child(2),
.assess-form:has([name="q3"]:checked) .assess-cells i:nth-child(3), .assess-form:has([name="q4"]:checked) .assess-cells i:nth-child(4),
.assess-form:has([name="q5"]:checked) .assess-cells i:nth-child(5), .assess-form:has([name="q6"]:checked) .assess-cells i:nth-child(6),
.assess-form:has([name="q7"]:checked) .assess-cells i:nth-child(7), .assess-form:has([name="q8"]:checked) .assess-cells i:nth-child(8),
.assess-form:has([name="q9"]:checked) .assess-cells i:nth-child(9), .assess-form:has([name="q10"]:checked) .assess-cells i:nth-child(10) { background: var(--cinnabar); }
.assess-status { flex: 1 1 18em; min-width: 0; font-size: 14px; line-height: 1.7; color: var(--accent-text-sm); }
.assess-status:empty { display: none; }
@media (max-width: 559px) {
  .assess-dock { gap: 4px 16px; }
  .assess-cells { display: flex; margin: 5px 0 0; }
  .assess-cells i { width: 11px; }
  .assess-status { flex-basis: 100%; font-size: 13.5px; }
}
@media (forced-colors: active) { .assess-cells { display: none; } }

/* ---------- 结果窗 ---------- */
.assess-result { margin-top: clamp(28px, 3vw, 40px); }
.assess-fallback { padding: 18px 22px; border: 1px dashed var(--line-2); border-radius: 14px; font-size: 15px; line-height: 1.85; color: var(--ink-soft); }
.assess-fallback p + p { margin-top: 6px; }
.assess-fallback a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.assess-report-title { font-size: 12.5px; }
.assess-report-body { padding: clamp(22px, 3vw, 34px); }
.assess-headline { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: 12px; }
.assess-figure { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgb(255 255 255 / 0.8), rgb(var(--paper-rgb) / 0.5)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8); }
.assess-figure-label { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.assess-figure-value { font-family: var(--head); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--ink-soft); }
.assess-figure-value b { font-size: 46px; line-height: 1.05; color: var(--ink); }
.assess-stage-name { font-family: var(--head); font-size: clamp(26px, 3vw, 34px); font-weight: var(--w-title); line-height: 1.25; letter-spacing: var(--track-title); color: var(--ink); }
.assess-stage-sub { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 559px) { .assess-headline { grid-template-columns: minmax(0, 1fr); } }

/* 总分刻度：三段的分界在 7.5、14.5 分处；所在阶段那一格下面一道短朱线（data-band 由脚本设） */
.assess-meter { --fill: 0%; position: relative; margin-top: 28px; }
.assess-meter-track { position: relative; height: 10px; overflow: hidden; border-radius: 5px; background: rgb(var(--accent-rgb) / 0.12); }
.assess-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--fill); border-radius: 5px; background-color: var(--cinnabar); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0)); }
.assess-meter-track::before, .assess-meter-track::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; margin-left: -1px; background: var(--sheet); }
.assess-meter-track::before { left: 37.5%; }
.assess-meter-track::after { left: 72.5%; }
.assess-meter::after { content: ""; position: absolute; top: 16px; left: 0; width: 24px; height: 2px; border-radius: 1px; background: var(--cinnabar); }
.assess-meter[data-band="2"]::after { left: calc(37.5% + 8px); }
.assess-meter[data-band="3"]::after { left: calc(72.5% + 8px); }
.assess-meter-bands { display: grid; grid-template-columns: 37.5fr 35fr 27.5fr; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.assess-meter-bands > li { padding: 8px 10px 0 0; }
.assess-meter-bands > li + li { padding-left: 8px; }
.assess-meter-bands small { display: block; font-size: 12px; }
.assess-meter-bands > li.is-current { font-weight: 600; color: var(--accent-text-sm); }
@media (max-width: 479px) { .assess-meter-bands { font-size: 12px; } .assess-meter-bands small { font-size: 11px; } }
@media (forced-colors: active) { .assess-meter::after, .assess-bar { display: none; } }

.assess-stage-desc { max-width: 48em; margin-top: 24px; font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); }
.assess-stage-desc p + p { margin-top: 8px; }
.assess-weak-title { margin-top: 30px; font-size: 17px; font-weight: var(--w-title); letter-spacing: var(--track-tight); }
.assess-weak { display: grid; gap: 12px; margin-top: 14px; counter-reset: weak; }
.assess-weak > li { position: relative; padding: 18px 20px 18px 56px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet-hi); box-shadow: inset 0 1px 0 var(--key-paper-hi); counter-increment: weak; }
.assess-weak > li::before { content: counter(weak, decimal-leading-zero); position: absolute; top: 21px; left: 20px; font-family: var(--mono); font-size: 12px; color: var(--accent-text-sm); }
.assess-weak-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.assess-weak-head b { font-size: 16px; color: var(--ink); }
.assess-weak-head span { font-size: 13px; color: var(--muted); }
.assess-advice-label { margin-top: 10px; font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.assess-weak > li > p:not([class]) { max-width: 48em; margin-top: 2px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.assess-links { margin-top: 8px; font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); }
.assess-links a, .assess-tip a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.assess-weak-note { margin-top: 12px; font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); }
@media (max-width: 479px) { .assess-weak > li { padding: 16px 16px 16px 46px; } .assess-weak > li::before { left: 16px; top: 19px; } }

/* 各题得分（details）：每行前一根两格的分项条，一格 1 分 */
.assess-breakdown { margin-top: 22px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.assess-breakdown summary, .assess-mail-preview summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.assess-breakdown summary { padding: 14px 2px; font-size: 14.5px; font-weight: 600; }
.assess-breakdown summary::-webkit-details-marker, .assess-mail-preview summary::-webkit-details-marker { display: none; }
.assess-breakdown summary::after, .assess-mail-preview summary::after { content: ""; flex-shrink: 0; width: 11px; height: 11px; background: linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat; transition: rotate 220ms var(--ease); }
.assess-breakdown[open] summary::after, .assess-mail-preview[open] summary::after { rotate: 45deg; }
.assess-breakdown ol { display: grid; gap: 6px; padding: 0 2px 16px; font-size: 14px; line-height: 1.75; color: var(--ink-soft); }
.assess-bar { position: relative; display: inline-block; width: 34px; height: 6px; margin-right: 12px; overflow: hidden; border-radius: 3px; vertical-align: 0.14em; background: rgb(var(--accent-rgb) / 0.12); }
.assess-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--s, 0) * 100%); border-radius: 3px; background: var(--cinnabar); }
.assess-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--sheet); }
.assess-tip { max-width: 48em; margin-top: 18px; font-size: 14px; line-height: 1.85; color: var(--ink-soft); }

/* 结果窗下半截：预约邮件 */
.assess-apply { padding: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); background: rgb(var(--paper-rgb) / 0.55); }
.assess-mail-note { max-width: 52em; margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.assess-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.assess-copy .i { width: 15px; height: 15px; }
.assess-copy-status { font-size: 13px; color: var(--ink-soft); }
.assess-mail-preview { margin-top: 14px; }
.assess-mail-preview summary { justify-content: flex-start; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.assess-mail-preview pre { margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--sheet-hi); font-family: var(--sans); font-size: 13px; line-height: 1.8; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 02 课前测评：一至八 ---------- */
.assess-rows .dir-item { padding: clamp(34px, 4vw, 52px) 0; }
.assess-rows .dir-id { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; }
.assess-rows .dir-name small { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: 0.06em; color: var(--muted); }
@media (max-width: 639px) { .assess-rows .dir-id { position: static; } }
.assess-body { min-width: 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); }
.assess-body > * + * { margin-top: 14px; }
.assess-body > p { max-width: 46em; }
.assess-body > :is(.grid, .checks, .assess-dims, .assess-defs, .assess-stages, .assess-steps, .link-list, .assess-booking) { margin-top: 20px; }
.assess-body > :is(.grid, .checks, .assess-dims, .assess-defs, .assess-stages, .assess-steps, .link-list, .assess-booking) + * { margin-top: 20px; }
.assess-body b { font-weight: 600; color: var(--ink-2); }
.assess-body .checks li { font-size: 15px; color: var(--ink-soft); }
.assess-body-lead { font-size: 17px; font-weight: 500; line-height: 1.85; color: var(--ink); }
.assess-body > .assess-sub { margin-top: 34px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.assess-body > .assess-sub + * { margin-top: 12px; }

/* 两类情况：两张卡，粗体小标在上 */
.assess-cases .card { font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.assess-cases .card b { margin-bottom: 6px; font-size: 15px; color: var(--ink); }

/* 学员问卷的四个维度 */
.assess-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: dim; }
.assess-dims li { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / 0.55); font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink); counter-increment: dim; }
.assess-dims li::before { content: counter(dim, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent-text-sm); }
@media (max-width: 559px) { .assess-dims { grid-template-columns: minmax(0, 1fr); } }

/* 名称较长的定义列表：名称在上，说明在下 */
.assess-defs { border-top: 1px solid var(--line-2); }
.assess-defs > div { padding: 13px 0 15px; border-bottom: 1px solid var(--line); }
.assess-defs dt { font-size: 15px; font-weight: 600; color: var(--ink); }
.assess-defs dd { margin-top: 3px; font-size: 15px; line-height: 1.85; }

/* 三个阶段：三张卡，卡顶一根三格的小条，表示第几级 */
.assess-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.assess-stage { padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); box-shadow: var(--sheet-shadow); }
.assess-stage::before { content: ""; display: block; width: 57px; height: 6px; margin-bottom: 16px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) 0 calc(var(--h) * 33.34%), rgb(var(--ink-rgb) / 0.13) 0); -webkit-mask: repeating-linear-gradient(90deg, #000 0 17px, transparent 17px 20px); mask: repeating-linear-gradient(90deg, #000 0 17px, transparent 17px 20px); }
.assess-stage h4 { font-family: var(--head); font-size: 21px; font-weight: var(--w-title); line-height: 1.4; letter-spacing: var(--track-title); color: var(--ink); }
.assess-stage h4 small { display: block; margin-bottom: 2px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.assess-stage .checks { margin-top: 14px; gap: 6px; }
.assess-body .assess-stage .checks li { font-size: 14px; line-height: 1.7; }
@media (max-width: 899px) { .assess-stages { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) { .assess-stage::before { display: none; } }

/* 怎样预约：按钮和邮箱一行；之后怎样安排是编号的步骤 */
.assess-booking { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.assess-booking .email-line { margin-top: 0; }
.assess-body > .copy-status { margin-top: 4px; }
.assess-steps { border-top: 1px solid var(--line-2); counter-reset: step; }
.assess-steps > li { position: relative; padding: 13px 0 14px 46px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.85; counter-increment: step; }
.assess-steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 16px; left: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--accent-text-sm); }
.assess-steps > li > b:first-child { display: block; margin-bottom: 2px; font-size: 15.5px; color: var(--ink); }

/* ---------- 03 常见问题：左标题、右内容（左边随页面停住） ---------- */
.assess-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: 32px clamp(40px, 6vw, 88px); align-items: start; }
.assess-split > .sec-head { position: sticky; top: calc(var(--header-h) + 28px); margin-bottom: 0; }
.assess-split .faq + .note-line { margin-top: 22px; }
.faq summary h3 { font: inherit; letter-spacing: inherit; }
@media (max-width: 1023px) {
  .assess-split { grid-template-columns: minmax(0, 1fr); }
  .assess-split > .sec-head { position: static; margin-bottom: 12px; }
}
@media print { html.js .assess-dock { position: static; } }

/* ---------- v0.24（2026-10-22）02 课前测评收短：左标题、右一段话加三行和一行在线咨询（.assess-brief） ---------- */
.assess-brief { max-width: 46em; }
.assess-brief .assess-steps > li > b:first-child { display: inline; margin: 0 12px 0 0; }
.assess-brief .assess-booking { margin-top: 24px; }
.assess-booking-note { flex: 1 1 18em; margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted); }