/* ============ 练习页工具栏（controls 面板）布局 ============
 * 2+1 分栏结构：上栏（左 题型 / 右 主操作）+ 下栏（左 题量难度 / 右 辅助打印）。
 * 仅定义布局骨架与视觉样式，所有视觉原子属性引用 shared/styles/tokens.css 中的变量；
 * 颜色色调全部沿用原有令牌，仅调整尺寸、间距与对齐。
 * 面板粘性置顶（sticky + 半透明模糊），滚动长题目时始终可见。
 * 依赖：shared/styles/tokens.css 须先于本文件加载。
 * 本文件内容包在 @layer toolbar 内，参与全局层叠顺序（tokens→base→components→toolbar→pages）。
 */

@layer toolbar {
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow); padding: var(--spacing-md); margin: var(--spacing-sm) 0; }

/* ===== 工具栏容器：纵向堆叠 两行控制栏 + 状态条，紧凑行距 ===== */
.toolbar { display: flex; flex-direction: column; gap: 4px; min-height: fit-content;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.2; }

/* ===== 控制行：左右贴边分栏（左栏多行时顶部对齐，右栏按钮固定不漂移） ===== */
.control-row { display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; min-height: 34px; flex-wrap: wrap; }

/* ===== 左右分组：左栏占满剩余空间自动换行；右栏固定不换行、始终靠右 ===== */
.left-group { display: flex; align-items: center; align-content: flex-start; gap: 6px; flex-wrap: wrap;
    flex: 1 1 auto; min-width: 0; }
.right-group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
    justify-content: flex-end; flex-shrink: 0; margin-left: auto; white-space: nowrap; }

/* ===== 练习页 左设置 / 右操作 黄金布局（左 题型/题量/难度，右 操作按钮） ===== */
.controls-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-lg); align-items: start; }
/* 右侧操作区：三行纵向堆叠，行间留呼吸感 */
.controls-actions { display: flex; flex-direction: column; gap: 12px;
    align-items: stretch; min-width: 220px; }
/* 第一行（核心操作）：独立成行，占满列宽，强调「启动」地位 */
.controls-row.row-single { display: flex; }
.controls-row.row-single > .btn { flex: 1 1 auto; }
/* 第二/三行（校验辅助 / 系统工具）：两个按钮等宽并排、均匀间隔 */
.controls-row.row-pair { display: flex; gap: 10px; }
.controls-row.row-pair > .btn { flex: 1 1 0; min-width: 0; }

/* ===== 左侧设置区：题型 / 题量 / 难度 三层纵向堆叠 ===== */
/* 每层：标题（左固定）+ 内容（右，可换行；换行后对齐到首个内容起点，而非标题） */
.group { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
/* 三层标题完全统一：与右侧按钮同字号 / 加粗 / 同色 */
.group .lbl { flex: 0 0 auto; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); margin-right: 0; }
.group > .setting-content { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 题型分段控件容器：保持内部 gap:0 无缝相连，仅撑满剩余宽度 */
.group > .type-chips { flex: 1 1 auto; min-width: 0; }
/* 左侧内容文字：比标题小一号（13px）但同样加粗，与标题形成从属关系 */
.group .chip { font-weight: 700; }
.range-hint { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--toolbar-chip-ink); }
/* 三层（题型 / 题量 / 难度）纵向堆叠，层间距与右侧操作行一致（12px） */
.controls-settings .row { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }

/* ===== 粘性工具栏：滚动长题目时面板常驻视口顶部，随时可检查答案 / 打印 ===== */
.panel.controls {
    position: sticky;
    top: var(--toolbar-sticky-top);
    z-index: var(--toolbar-sticky-z);
    background: var(--toolbar-sticky-bg);
    -webkit-backdrop-filter: blur(var(--toolbar-sticky-blur)) saturate(1.15);
    backdrop-filter: blur(var(--toolbar-sticky-blur)) saturate(1.15);
    border-color: var(--toolbar-sticky-border);
}
/* 不支持 backdrop-filter 的浏览器：提高不透明度兜底，保证文字清晰 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .panel.controls { background: var(--toolbar-sticky-bg-fallback); }
}

/* ===== 工具栏数字输入框（题量自定义 / 难度 / 专项「最大数」等）=====
 * 统一令牌着色，去除历史内联硬编码色；聚焦环用 --brand，与 chip/btn 一致 */
.tb-num-input {
    height: 34px; padding: 0 8px;
    border: 1.5px solid var(--line-strong); border-radius: 9px;
    background: var(--soft-bg); color: var(--ink);
    font-size: 14px; font-weight: 700; text-align: center; outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.tb-num-input:focus, .tb-num-input:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .22);
}
.count-tip { font-size: 11px; font-weight: 500; color: var(--muted); }

/* ===== chip 分段控件：紧凑 26px 胶囊，颜色沿用原令牌 ===== */
.chip { cursor: pointer; font-size: var(--toolbar-font-size); font-weight: 500; line-height: 1.2;
    color: var(--toolbar-chip-ink);
    min-height: var(--toolbar-touch-min);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--toolbar-chip-border); background: var(--toolbar-chip-bg);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: var(--toolbar-chip-radius); padding: var(--toolbar-chip-pad); transition: .18s;
    white-space: nowrap; }
.chip:hover { border-color: var(--toolbar-chip-hover-border); background: var(--toolbar-chip-hover-bg); }
.chip.active { background: var(--toolbar-chip-grad); border-color: var(--toolbar-chip-active-border);
    color: var(--toolbar-chip-active-ink); box-shadow: var(--toolbar-chip-active-shadow); }

/* 题型行统一分割（分段控件：无缝相连、内部竖线分隔） */
#typeGroup { gap: 8px; }
#typeGroup .lbl { margin-right: 0; }
/* 附加设置组（如应用题「难度」分档）：紧跟题型组，样式与题型行一致 */
.type-sub-group { gap: 8px; }
.type-sub-group .lbl { margin-right: 0; }
/* 题型按钮独立容器：换行时新行从第一个按钮的下一行开始，并与上一行第一个按钮左对齐 */
.type-chips { display: flex; flex-wrap: wrap; gap: 0; }
.type-chips .chip { border-radius: 0; }
.type-chips .chip:first-of-type { border-radius: var(--toolbar-chip-radius) 0 0 var(--toolbar-chip-radius); }
.type-chips .chip:last-of-type { border-radius: 0 var(--toolbar-chip-radius) var(--toolbar-chip-radius) 0; }
.type-chips .chip + .chip { border-left: 0; }
/* 换行后的行首/行尾按钮：补齐左竖线边框与两侧圆角 */
.type-chips .chip.line-start { border-left: 1px solid var(--toolbar-chip-border) !important;
    border-radius: var(--toolbar-chip-radius) 0 0 var(--toolbar-chip-radius) !important; }
.type-chips .chip.line-end { border-radius: 0 var(--toolbar-chip-radius) var(--toolbar-chip-radius) 0 !important; }
.type-chips .chip.line-start.line-end { border-radius: var(--toolbar-chip-radius) !important; }
/* 组卷方式中第 5 个选项（期末模拟试卷）前的分隔线，使其在视觉上独立于原 4 个题型 */
.type-chips .chip-divider { display: inline-block; width: 1px; height: 22px; margin: 4px 10px;
    background: var(--toolbar-chip-border); align-self: center; }

/* ===== 操作按钮：主操作 28px/14px/600，辅助 24px/12px/400，颜色沿用原令牌 ===== */
.btn { cursor: pointer; border: none; border-radius: var(--toolbar-btn-radius); padding: var(--toolbar-btn-pad);
    font-size: 14px; font-weight: 700; line-height: 1.2; transition: .18s;
    min-height: var(--toolbar-btn-min-height);
    display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; }
.btn-primary { background: var(--toolbar-btn-grad); color: #fff;
    box-shadow: var(--toolbar-btn-primary-shadow); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { background: var(--toolbar-btn-grad-active);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
.btn-ghost { background: var(--toolbar-btn-ghost-bg); color: var(--toolbar-btn-ghost-ink);
    border: 1px solid var(--toolbar-btn-ghost-border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-ghost:hover { background: var(--toolbar-btn-ghost-hover-bg); }
.btn-ghost:active { background: var(--toolbar-btn-grad); color: #fff; border-color: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.3); }

@media (max-width: 760px) {
    /* 窄屏：左栏继续自动换行；右栏 6 个功能按键位置不变，仅允许横向滚动（不换行） */
    .control-row { gap: 6px; }
    .right-group { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .right-group::-webkit-scrollbar { display: none; }
    /* 窄屏：左设置 / 右操作 改为上下堆叠，操作区占满宽度 */
    .controls-grid { grid-template-columns: 1fr; }
    .controls-actions { min-width: 0; }
}
} /* /@layer toolbar */