/* controls.css —— 能点的控件：按钮、图标按钮、分段选择、开关、输入、表单、模态。展示类住 components.css。 */

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--h-md);
  padding: 0 var(--space-6);
  border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* 主按钮：只描边、不填色——品牌青外圈，里面透明，字是正文色（D092）。一屏只放一个 */
.btn.primary { border-color: var(--ring); font-weight: var(--fw-semibold); }
.btn.primary:hover:not(:disabled) { border-color: var(--ring); background: var(--bg-hover); }
/* 危险动作：只在确认浮窗里用（红字、透明底）；平时的「删除」按钮是普通灰框 */
.btn.danger { color: var(--danger); }
/* 带颜色的描边钮（照 OpenLucy 的 btn-success / secondary / outline / danger / warning）：字和边同色，悬停填满。工作链一行里的钮用 */
.btn.tint-ok   { border-color: var(--success); color: var(--success); }
.btn.tint-sec  { border-color: var(--text); color: var(--text); }
.btn.tint-acc  { border-color: var(--accent); color: var(--accent); }
.btn.tint-bad  { border-color: var(--danger); color: var(--danger); }
.btn.tint-warn { border-color: var(--warning); color: var(--warning); }
.btn.tint-ok:hover:not(:disabled)   { border-color: var(--success); background: var(--success); color: var(--bg); }
.btn.tint-sec:hover:not(:disabled)  { border-color: var(--text); }
.btn.tint-acc:hover:not(:disabled)  { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.btn.tint-bad:hover:not(:disabled)  { border-color: var(--danger); background: var(--danger); color: var(--bg); }
.btn.tint-warn:hover:not(:disabled) { border-color: var(--warning); background: var(--warning); color: var(--bg); }
.btn.ghost  { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); }
.btn.xs { height: var(--h-sm); padding: 0 var(--space-4); font-size: var(--fs-xs); }
.btn.lg { height: var(--h-lg); padding: 0 var(--space-7); border-radius: var(--radius); font-size: var(--fs-base); }
.btn.block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 只有一个图标的按钮（收起侧栏、下载、关闭浮窗） */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--h-md);
  height: var(--h-md);
  border: 0;
  border-radius: var(--radius-ctl);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* 分段选择（设置里的 System / Reduced）：一组按钮连成一条，选中那段抬亮 */
.seg {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.seg-btn {
  height: var(--h-md);
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.on { background: var(--active-bg); color: var(--text); }

/* 开关：只描边（D092）。开 = 品牌青外圈 + 正文色圆钮在右；关 = 灰圈 + 暗圆钮在左。
 * 真 checkbox 藏起来，槽和圆钮是它后面的两个 span，靠 :checked ~ 切样式 */
.switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--switch-w);
  height: var(--switch-h);
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch-track {
  position: absolute;
  inset: 0;
  border: var(--border-w) solid var(--border-soft);
  border-radius: calc(var(--switch-h) / 2);
  background: transparent;
  transition: border-color 0.2s;
}
.switch-knob {
  position: absolute;
  top: calc((var(--switch-h) - var(--switch-knob)) / 2);
  left: calc((var(--switch-h) - var(--switch-knob)) / 2);
  width: var(--switch-knob);
  height: var(--switch-knob);
  border-radius: 50%;
  background: var(--text-dim);
  pointer-events: none;
  transition: transform 0.2s, background 0.2s;
}
.switch input:checked ~ .switch-track { border-color: var(--ring); }
.switch input:checked ~ .switch-knob { transform: translateX(calc(var(--switch-w) - var(--switch-h))); background: var(--text); }
.switch input:focus-visible ~ .switch-track { box-shadow: 0 0 0 var(--border-w) var(--accent); }
.switch:has(input:disabled) { opacity: 0.35; cursor: not-allowed; }

/* ── 输入 ─────────────────────────────────────────────────────────────── */
.input, .select {
  width: 100%;
  height: var(--h-md);
  padding: 0 var(--space-5);
  border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.input:focus, .select:focus { border-color: var(--border-strong); }
.select.auto { width: auto; }
.input:disabled, .select:disabled { opacity: 0.45; cursor: not-allowed; }

/* 勾选框：自己画。黑底细框，勾上后中间一个白色 ✓ */
.check {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: var(--space-7);
  height: var(--space-7);
  margin: 0;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--bg);
  cursor: pointer;
}
.check:checked { border-color: var(--ring); }
.check:checked::after {
  content: "✓";
  color: var(--text-val);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
}

/* ── 表单 ─────────────────────────────────────────────────────────────── */
.field-hint      { font-size: var(--fs-note); color: var(--text-dim); line-height: var(--lh-base); }
.field-hint.ok   { color: var(--success); }
.field-hint.warn { color: var(--warning); }
.field-hint.bad  { color: var(--danger); }
/* 一行里输入框 + 按钮：框吃掉剩余宽度，按钮贴右；整行有上限，宽屏上不拉满 */
.inline-ctl { display: flex; align-items: center; gap: var(--space-3); max-width: var(--form-w); }
.inline-ctl .input { flex: 1; min-width: 0; }
/* 勾选框 + 一段说明（下单页的同意） */
.consent { display: flex; align-items: flex-start; gap: var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-base); cursor: pointer; }
.consent .check { margin-top: var(--space-1); }

/* ── 模态浮窗 ─────────────────────────────────────────────────────────── */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-7);
  background: var(--mask);
}
.modal-mask.open { display: flex; }
.modal {
  width: 100%;
  max-width: var(--modal-w);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-pop);
}
.modal-head {
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-w) solid var(--border);
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-w) solid var(--border);
}