/* FlowSite 轻交互组件 — learncc zinc 深色主题对齐（2026-09-12 重制）
 * 语义色全部引用 theme-learncc.css :root 五态 token（--lc-*），本文件不落语义 hex（S1）
 * quiz 家族（B5-1）: johari（fs-jh-*）、autodecide（fs-ad-*）与 constquiz（fs-cq-*）共用同一套样式定义
 *   （容器脸/选项行/反馈框按选择器组合并, 视觉同源; JS 类名与交互逻辑不动） */
.fs-autodecide, .fs-switch, .fs-budget, .fs-johari, .fs-constquiz { border: 1px solid var(--lc-border); border-radius: 12px; margin: 1.2em 0; background: var(--lc-card); padding: 14px 16px; }
.fs-ad-intro, .fs-sw-intro, .fs-bd-intro, .fs-jh-intro, .fs-cq-intro { font-size: 13.5px; color: var(--lc-text2); margin-bottom: 12px; }

/* ===== quiz 共用基脸（fs-ad-* 与 fs-jh-* 同源） ===== */
.fs-ad-finding, .fs-jh-card, .fs-cq-proposal { background: var(--lc-bg1); border: 1px solid var(--lc-border2); border-radius: 8px; padding: 12px 14px; font-size: 14px; color: var(--lc-text-h3); margin-bottom: 10px; }
.fs-ad-opts, .fs-jh-opts, .fs-cq-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.fs-ad-feedback, .fs-jh-fb, .fs-cq-fb { margin-top: 10px; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.fs-fb-verdict { font-weight: 600; margin-bottom: 4px; }
.fs-fb-why, .fs-jh-why { color: var(--lc-text2); }
.fs-opt-right { border-color: var(--lc-emerald) !important; color: var(--lc-emerald-300) !important; background: color-mix(in srgb, var(--lc-emerald) 12%, transparent) !important; }
.fs-opt-wrong { border-color: var(--lc-red) !important; color: var(--lc-red-300) !important; background: color-mix(in srgb, var(--lc-red) 12%, transparent) !important; }
.fs-fb-right { background: color-mix(in srgb, var(--lc-emerald) 8%, transparent); border: 1px solid var(--lc-emerald-border-60); color: var(--lc-emerald-300); }
.fs-fb-wrong { background: color-mix(in srgb, var(--lc-amber) 8%, transparent); border: 1px solid var(--lc-amber-border-60); color: var(--lc-amber-300); }
.fs-ad-done, .fs-cq-done { font-size: 14px; font-weight: 600; margin: 8px 0; color: var(--lc-text); }

/* ===== autodecide 专属（进度条/记分） ===== */
.fs-ad-bar, .fs-cq-bar { display: flex; justify-content: space-between; font-size: 13px; color: var(--lc-blue-300); margin-bottom: 10px; }

/* ===== constquiz 专属（宪法四问, sweep 新增; quiz 家族第三族） ===== */
.fs-cq-step { font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--lc-blue-300); letter-spacing: .04em; margin-bottom: 4px; }
.fs-cq-qtext { font-size: 14.5px; font-weight: 600; color: var(--lc-text-h3); margin-bottom: 10px; }
.fs-cq-verdict { background: var(--lc-bg1); border: 1px solid var(--lc-border2); border-radius: 8px; padding: 12px 14px; }
.fs-cq-ruling { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.fs-cq-r-bad { color: var(--lc-red-300); }
.fs-cq-r-warn { color: var(--lc-amber-300); }
.fs-cq-r-good { color: var(--lc-emerald-300); }
.fs-cq-rwhy { font-size: 13px; color: var(--lc-text2); line-height: 1.6; }

/* ===== fs-tabs 章内分区容器（sweep R5: learncc 四标签式, active=2px 底线） ===== */
.fs-tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--lc-border); margin: 1.4em 0 0; flex-wrap: wrap; }
.fs-tabbtn { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--lc-text2); padding: 8px 14px; font-size: 13.5px; cursor: pointer; font-family: inherit; transition: color .15s ease, border-color .15s ease; }
.fs-tabbtn:hover { color: var(--lc-text); }
.fs-tabbtn.fs-tab-on { color: var(--lc-text); border-bottom-color: var(--lc-blue); font-weight: 600; }
.fs-tabpane { padding-top: 14px; }

/* ===== switch 管道开关 ===== */
.fs-sw-ctrl { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.fs-sw-param { font-size: 13px; font-family: ui-monospace, Menlo, monospace; cursor: pointer; color: var(--lc-text-h3); }
.fs-sw-pipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px; background: var(--lc-code-bg); border-radius: 8px; min-height: 52px; }
.fs-sw-chip { background: transparent; border: 1px solid var(--lc-blue); color: var(--lc-blue-300); border-radius: 12px; padding: 3px 11px; font-size: 12.5px; }
.fs-chip-must { border-style: dashed; border-color: var(--lc-emerald); color: var(--lc-emerald-300); }
.fs-sw-arrow { color: var(--lc-text-dim); font-size: 12px; }
.fs-sw-empty { font-size: 13px; color: var(--lc-red-300); }
.fs-sw-note { margin-top: 10px; font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; color: var(--lc-text2); background: var(--lc-bg1); padding: 8px 10px; border-radius: 6px; word-break: break-all; border: 1px solid var(--lc-border); }

/* ===== budget 429 计算器 ===== */
.fs-bd-box { display: flex; flex-direction: column; gap: 10px; }
.fs-bd-step { display: flex; align-items: center; gap: 10px; }
.fs-bd-lab { flex: 0 0 150px; font-size: 13.5px; color: var(--lc-text-h3); }
.fs-bd-btn { width: 34px; padding: 4px 0; text-align: center; }
.fs-bd-num { min-width: 28px; text-align: center; font-weight: 600; font-size: 15px; color: var(--lc-text); font-variant-numeric: tabular-nums; }
.fs-bd-out { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.fs-bd-cap { font-size: 13px; color: var(--lc-text2); }
.fs-bd-total { font-size: 34px; font-weight: 700; color: var(--lc-text); font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.fs-bd-eq { font-size: 13px; color: var(--lc-text2); font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.fs-bd-verdict { font-size: 13.5px; font-weight: 600; }
.fs-bd-ok { color: var(--lc-emerald-300); } .fs-bd-warn { color: var(--lc-amber-300); } .fs-bd-bad { color: var(--lc-red-300); }
.fs-bd-note { margin-top: 10px; font-size: 12.5px; color: var(--lc-text2); }

/* ===== johari 专属（题面文字/注释） ===== */
.fs-jh-text { font-size: 14px; color: var(--lc-text-h3); margin-bottom: 8px; }
.fs-jh-note { font-size: 12.5px; color: var(--lc-text2); }

/* ===== johari 2x2 视窗网格（批 4: 一排按钮 → 真田字格, 概念本命图形补齐） ===== */
.fs-jh-count { font-size: 12.5px; color: var(--lc-blue-300); text-align: right; margin-bottom: 8px; }
.fs-jh-window { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 5px; }
.fs-jh-corner { grid-column: 1; }
.fs-jh-axis { display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--lc-text3); letter-spacing: .04em; transition: color .25s ease; }
.fs-jh-axis-y { writing-mode: vertical-rl; }
.fs-jh-window-sub .fs-jh-axis { font-size: 10.5px; opacity: .65; } /* 后续题轴标淡化（首题常驻） */
.fs-jh-axis-hit { color: var(--lc-emerald-300) !important; opacity: 1 !important; font-weight: 700; }
.fs-jh-cell { position: relative; text-align: left; background: var(--lc-bg1); border: 1px solid var(--lc-border2); border-radius: 8px; padding: 9px 11px; cursor: pointer; font-family: inherit; transition: border-color .2s ease, background-color .2s ease, transform .15s ease; }
.fs-jh-cell:hover:not(:disabled) { background: var(--lc-surface-hover); transform: translateY(-1px); }
.fs-jh-cell:disabled { cursor: default; }
.fs-jh-qname { font-size: 13.5px; font-weight: 600; }
.fs-jh-qhint { font-size: 11.5px; color: var(--lc-text3); margin-top: 3px; line-height: 1.5; }
/* 域色点缀: 宫格左缘色条 + 象限名着色 */
.fs-jh-tone-emerald { box-shadow: inset 3px 0 0 var(--lc-emerald-border-60); } .fs-jh-tone-emerald .fs-jh-qname { color: var(--lc-emerald-300); }
.fs-jh-tone-blue    { box-shadow: inset 3px 0 0 var(--lc-blue-border-60); }    .fs-jh-tone-blue    .fs-jh-qname { color: var(--lc-blue-300); }
.fs-jh-tone-amber   { box-shadow: inset 3px 0 0 var(--lc-amber-border-60); }   .fs-jh-tone-amber   .fs-jh-qname { color: var(--lc-amber-300); }
.fs-jh-tone-purple  { box-shadow: inset 3px 0 0 var(--lc-purple-border-60); }  .fs-jh-tone-purple  .fs-jh-qname { color: var(--lc-purple-300); }
/* 判定态: 答对✓亮起, 答错✗闪红 */
.fs-jh-hit { border-color: var(--lc-emerald-border-60) !important; background: color-mix(in srgb, var(--lc-emerald) 10%, transparent) !important; }
.fs-jh-hit::after, .fs-jh-miss::after, .fs-jh-miss-flash::after { position: absolute; top: 6px; right: 8px; font-size: 15px; font-weight: 700; line-height: 1; }
.fs-jh-hit::after { content: '✓'; color: var(--lc-emerald-300); }
.fs-jh-miss, .fs-jh-miss-flash { border-color: var(--lc-red-border-60) !important; }
.fs-jh-miss::after, .fs-jh-miss-flash::after { content: '✗'; color: var(--lc-red-300); }
.fs-jh-hit-pop::after { animation: fs-jh-pop .3s ease; }
.fs-jh-miss-flash { animation: fs-jh-shake .35s ease; }
@keyframes fs-jh-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes fs-jh-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (max-width: 420px) { .fs-jh-window { grid-template-columns: 16px 1fr 1fr; } .fs-jh-qhint { display: none; } }
@media (prefers-reduced-motion: reduce) { .fs-jh-cell, .fs-jh-axis, .fs-jh-hit-pop::after, .fs-jh-miss-flash { transition: none; animation: none; } }

/* ===== feedsplit 喂模式前后对比（C11 · P8 对比分屏） ===== */
.fs-feedsplit { border: 1px solid var(--lc-border); border-radius: 12px; margin: 1.2em 0; background: var(--lc-card); padding: 14px 16px; }
.fs-fs-q { font-size: 14px; font-weight: 600; color: var(--lc-text-h3); margin-bottom: 12px; }
.fs-fs-go { margin-bottom: 12px; }
.fs-fs-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 12px; align-items: stretch; }
.fs-fs-div { background: var(--lc-border2); }
.fs-fs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fs-fs-tag { font-size: 13.5px; font-weight: 700; }
.fs-fs-side-plain .fs-fs-tag { color: var(--lc-text2); }
.fs-fs-side-fed .fs-fs-tag { color: var(--lc-emerald-300); }
.fs-fs-mark { font-size: 11.5px; padding: 2px 9px; border-radius: 9999px; }
.fs-fs-side-plain .fs-fs-mark { color: var(--lc-amber-300); border: 1px solid var(--lc-amber-border-30); background: color-mix(in srgb, var(--lc-amber) 8%, transparent); }
.fs-fs-side-fed .fs-fs-mark { color: var(--lc-emerald-300); border: 1px solid var(--lc-emerald-border-30); background: color-mix(in srgb, var(--lc-emerald) 8%, transparent); }
.fs-fs-item { font-size: 13px; line-height: 1.55; color: var(--lc-text-body); background: var(--lc-bg1); border: 1px solid var(--lc-border); border-radius: 8px; padding: 8px 11px; margin-bottom: 6px; }
.fs-fs-item:last-child { margin-bottom: 0; }
.fs-fs-item b { color: var(--lc-text-h3); }
.fs-fs-side-fed .fs-fs-item { border-color: var(--lc-emerald-border-30); }
.fs-fs-grid:not(.fs-fs-on) .fs-fs-item { opacity: 0; }
.fs-fs-on .fs-fs-item { animation: fs-fs-in .35s ease both; animation-delay: calc(var(--fs-i, 0) * .13s); }
@keyframes fs-fs-in { from { opacity: 0; transform: translateY(6px); } }
.fs-fs-note { margin-top: 12px; font-size: 12.5px; color: var(--lc-text2); }
@media (max-width: 640px) { .fs-fs-grid { grid-template-columns: 1fr; } .fs-fs-div { height: 1px; } }
@media (prefers-reduced-motion: reduce) { .fs-fs-on .fs-fs-item { animation: none; } }

/* ===== fs-motion 入场体系（sweep R5-P1: learncc whileInView once 的 zinc 化适配） ===== */
body.fs-motion-armed .fs-m:not(.fs-in) { opacity: 0; }
.fs-m.fs-in { animation: fs-in .35s ease-out both; }
@keyframes fs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fs-m.fs-in { animation: none; } body.fs-motion-armed .fs-m:not(.fs-in) { opacity: 1; } }
/* replay 步进芯片: 淡入 + 60ms 错峰（引擎级, 剧本无需声明; PROTOCOL 定档记录） */
.fs-chip-in { animation: fs-chipin .18s ease-out both; }
@keyframes fs-chipin { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .fs-chip-in { animation: none; } }

/* ===== fs-quiz 形成性自测（Brown 规则: 错选项锁定/看解析/localStorage 记录） ===== */
.fs-quiz { border: 1px solid var(--lc-border); border-radius: 12px; margin: 1.2em 0; background: var(--lc-card); padding: 14px 16px; }
.fs-qz-bar { display: flex; justify-content: space-between; font-size: 13px; color: var(--lc-blue-300); margin-bottom: 10px; }
.fs-qz-q { font-size: 15px; font-weight: 600; color: var(--lc-text-h3); margin-bottom: 10px; line-height: 1.6; }
.fs-qz-opts { display: flex; flex-direction: column; gap: 8px; }
.fs-qz-opt { text-align: left; font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--lc-text-body); background: var(--lc-bg1); border: 1px solid var(--lc-border2); border-radius: 8px; padding: 9px 12px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.fs-qz-opt:hover:not(:disabled) { border-color: var(--lc-border-hi); }
.fs-qz-opt:disabled { cursor: default; opacity: .55; }
.fs-qz-opt:disabled:not(.fs-opt-right):not(.fs-opt-wrong) { opacity: .35; }
.fs-qz-fb { margin-top: 10px; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.fs-qz-done { font-size: 14px; font-weight: 600; margin: 8px 0; color: var(--lc-text); }
@media (prefers-reduced-motion: reduce) { .fs-qz-opt { transition: none; } }