/* ==========================================================================
   tool.css — 小工具页专用组件（表单、按钮组、结果区、状态条）
   引用 theme.css 变量；与 site.css 一起加载。
   ========================================================================== */

.tool-shell { padding: 8px 0 84px; }

.tool-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow: hidden;
}

.tool-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.tool-bar .grow { flex: 1 1 auto; }
.tool-bar .hint {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-soft);   /* U19 0.3：12.5px 小字改用 -ink-soft（≈9.7:1） */
}

.tool-body { padding: 18px 16px 20px; }

/* 双栏（左输入右输出），窄屏自动堆叠 */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
}
.split > .pane { background: var(--bg); padding: 16px; min-width: 0; }
.split .pane-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.split .pane-head .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* 文本域 */
.ta {
  width: 100%; min-height: 320px; max-height: 60vh; overflow: auto; resize: vertical;   /* U19 0.9#3：超长输出不再把页面拉成几千像素 */
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65;
  padding: 12px 14px;
  border: 1px solid var(--line-input); border-radius: var(--radius);   /* U19 0.9#5：边界 ≥3:1 */
  background: var(--bg); color: var(--ink);
  tab-size: 2;
}
.ta:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface-2); }
.ta::placeholder { color: var(--muted); }
.ta[readonly] { background: var(--surface); }

/* 单行输入 */
.input {
  width: 100%; padding: 9px 12px;
  font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--line-input); border-radius: var(--radius);   /* U19 0.9#5 */
  background: var(--bg); color: var(--ink);
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--surface-2); }

/* 键盘焦点可见（U19 0.9#4）：放在 :focus 之后，键盘聚焦时覆盖成清晰焦点环 */
.ta:focus-visible,
.input:focus-visible { box-shadow: var(--focus-ring); }

/* 按钮组 */
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-sm { font-size: var(--fs-xs); padding: 7px 13px; border-radius: var(--radius-sm); }

/* 状态条（U19 0.9#2：去掉与 .input 同款的边框+灰底，不再「长得像输入框」） */
.status {
  display: none; align-items: flex-start; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6;
  padding: 4px 0;
  border: 0; background: transparent;
  margin: 0 0 14px;
}
.status.show { display: flex; }
.status .mark { flex: none; font-weight: 700; }
.status[data-kind="ok"]   { color: var(--ok); }
.status[data-kind="err"]  { color: var(--err); }
.status[data-kind="info"] { color: var(--muted); }
.status .detail { color: var(--ink-soft); }

/* 字段行 */
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.field > label {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  min-width: 96px;
}
.field .input { width: auto; flex: 1 1 200px; }

/* 开关 */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-soft); cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* 键值表 */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-family: var(--font-mono); font-size: var(--fs-xs); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); word-break: break-all; }

/* 说明区 */
.notes { margin-top: 30px; }
.notes h2 { font-size: 1.05rem; margin: 0 0 12px; letter-spacing: -.01em; max-width: 62ch; }   /* U19 0.9#1：说明文字行宽收口 */
.notes ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: .92rem; max-width: 62ch; }
.notes li + li { margin-top: 6px; }
.notes code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}

@media (max-width: 780px) {
  .split { grid-template-columns: 1fr; }
  .ta { min-height: 200px; }
}

/* ==========================================================================
   通用可视化组件 —— 所有工具页共用，新增工具请复用这些类，
   不要在页面里写 <style> 或成片行内样式（见 INTERFACES.md §1.11）。
   ========================================================================== */

/* 自适应网格容器 */
.tool-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* 单色块 / 色板 */
.swatch {
  height: 46px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.swatch-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.swatch-grid figure { margin: 0; }
.swatch-cap { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

/* 标签胶囊（统计、徽章、快捷值） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; background: var(--surface);
}
.chip[data-tone="ok"] { color: var(--ok); }
.chip[data-tone="err"] { color: var(--err); }

/* 结构化结果列表（匹配项、分组、日历式输出） */
.out-list {
  margin: 0; padding-left: 18px; max-height: 320px; overflow: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-soft);
}
.out-list li + li { margin-top: 3px; }
.out-list mark { background: var(--surface-2); color: var(--ink); border-radius: 3px; padding: 0 2px; }

/* 文本微调 */
.mono { font-family: var(--font-mono); }
.mini { font-size: var(--fs-xs); color: var(--muted); }

/* ==========================================================================
   U8 — 白底 + 蓝色科技未来视觉层（tool.css 侧）
   --------------------------------------------------------------------------
   同 site.css：只新增选择器 / 补属性，不改类名与结构；装饰只用
   background-image、box-shadow、border-color，不参与布局、不撑宽文档。
   工具页的玻璃面走 color-mix(--tech-blue 4%, --tech-glass-2)：白底上只留
   一点冷调，正文与 --muted 说明文字的对比度一点没动。
   ========================================================================== */

/* -------------------------------------------------- 面板 / 工具条 */

.tool-panel {
  background-color: color-mix(in srgb, var(--tech-blue) 4%, var(--tech-glass-2));
  border-color: var(--tech-hair);
  box-shadow: var(--tech-glow-sm);
}

/* 既有 .tool-bar 用了 background 简写，这里补的 background-* 都写在它后面 */
.tool-bar {
  background-color: color-mix(in srgb, var(--tech-blue) 5%, var(--tech-glass-2));
  background-image: var(--tech-grad-line);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
  background-origin: border-box;
  border-bottom-color: transparent;
}

/* -------------------------------------------------- 双栏 / pane 头 */

.split { background-color: var(--tech-hair-2); }
.split > .pane { background-color: color-mix(in srgb, var(--tech-blue) 2%, var(--tech-glass-2)); }

.split .pane-head {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--tech-hair-2);
}
.split .pane-head .label {
  color: var(--tech-blue-deep);
  letter-spacing: .12em;
}

/* -------------------------------------------------- 表单 */

.ta, .input {
  background-color: color-mix(in srgb, var(--tech-blue) 2%, var(--tech-glass-2));
  border-color: var(--tech-hair-2);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ta:focus, .input:focus {
  outline: none;
  border-color: var(--tech-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tech-blue) 14%, transparent);
  background-color: var(--bg);
}
.ta[readonly] { background-color: var(--surface); }
.switch input { accent-color: var(--tech-blue); }

/* -------------------------------------------------- 状态条（左侧亮条 + 10% 底色） */

.status {
  background-color: color-mix(in srgb, var(--tech-blue) 3%, var(--tech-glass-2));
  border-color: var(--tech-hair);
}
.status[data-kind="ok"] {
  background-color: color-mix(in srgb, var(--ok) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--ok) 30%, var(--tech-hair));
  border-left: 2px solid var(--ok);
}
.status[data-kind="err"] {
  background-color: color-mix(in srgb, var(--err) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--err) 30%, var(--tech-hair));
  border-left: 2px solid var(--err);
}
.status[data-kind="info"] { border-left: 2px solid var(--tech-line-2); }

/* -------------------------------------------------- 微组件统一到同一套发丝线 */

.chip {
  background-color: color-mix(in srgb, var(--tech-blue) 5%, var(--bg));
  border-color: var(--tech-hair-2);
  color: var(--tech-deep);
}
.chip[data-tone="ok"]  { color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 30%, var(--tech-hair)); }
.chip[data-tone="err"] { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, var(--tech-hair)); }

.swatch { border-color: var(--tech-hair-2); }
.swatch-cap { color: var(--tech-blue-deep); letter-spacing: .04em; }

.kv dt { color: var(--muted); letter-spacing: .04em; }
.kv dd { color: var(--tech-deep); }

.out-list mark {
  background-color: color-mix(in srgb, var(--tech-cyan) 18%, transparent);
  color: var(--tech-ink);
  border-radius: 3px;
}
.notes code {
  background-color: color-mix(in srgb, var(--tech-blue) 5%, var(--bg));
  border-color: var(--tech-hair-2);
  color: var(--tech-deep);
}

/* -------------------------------------------------- 减少动效 / 打印 */

@media (prefers-reduced-motion: reduce) {
  .ta, .input, .switch input { transition: none; }
}

@media print {
  .tool-panel, .tool-bar, .split, .split > .pane,
  .status, .chip, .swatch, .input, .ta, .notes code {
    background-image: none !important;
    box-shadow: none !important;
  }
  .tool-panel, .tool-bar, .split > .pane, .status, .chip, .notes code {
    background-color: transparent !important;
  }
  .tool-panel { border-color: var(--line) !important; }
  .tool-bar { border-bottom-color: var(--line) !important; }
  .split { background-color: var(--line) !important; }
  .split .pane-head { border-bottom-color: var(--line) !important; }
  .status { border-color: var(--line) !important; border-left-color: transparent !important; }
  .input, .ta { border-color: var(--line-strong) !important; }
  .chip, .swatch { border-color: var(--line) !important; }
}