/**
 * 常用工具箱组件样式（assets/css/tools.css）。
 *
 * 只承载 `template-parts/tool/` 下新增的组件类（uc / rt / cd / oe / tz / quiz /
 * calc / rc 以及 fx 的快捷方向行），不重复 portal.css 已有的 fx、tip、zip。
 *
 * 只在工具单页、工具箱归档与工具分组页加载（见 functions.php），不给全站多背一份
 * 用不到的 CSS。所有色值取 `:root` 令牌，窄屏降级放在文件末尾统一处理。
 */

/* ---------- 汇率换算：常用方向快捷行 ---------- */
.fx__quick { align-items: center; margin-top: 14px; }
.fx__quick-label { font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
.fx__quick-chip.is-active { background: var(--brand-surface); border-color: var(--brand-surface); color: #fff; }

/* ---------- 单位换算（uc-） ---------- */
.uc__form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.uc__swap {
  width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink-600);
  cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.uc__swap:hover { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-800); }
.uc__swap svg { width: 18px; height: 18px; }
.uc__out {
  margin-top: 18px; padding: 20px 22px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand-deep-900), var(--brand-deep-700)); color: #fff;
}
.uc__result { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.uc__result strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.uc__symbol { font-size: 15px; font-weight: 700; color: var(--gold-400); letter-spacing: .05em; }
.uc__rate { margin: 8px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .84); }
.uc__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.uc__table-wrap { min-width: 0; }
.uc__table-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-700); }
.uc__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.uc__table th, .uc__table td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.uc__table th:first-child, .uc__table td:first-child { text-align: left; }
.uc__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; }
.uc__table tbody tr:last-child td { border-bottom: 0; }
.uc__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 参照表（rt-） ---------- */
.rt__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; gap: 12px; align-items: end; }
.rt__submit { height: 42px; display: inline-flex; align-items: center; gap: 7px; }
.rt__submit svg { width: 16px; height: 16px; }
.rt__quick { align-items: center; margin-top: 14px; }
.rt__quick-label { font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
.rt__status { margin: 16px 0 0; font-size: 13px; color: var(--ink-500); }
.rt__empty { margin-top: 10px; }
.rt__wrap { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rt__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rt__table th, .rt__table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.rt__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; white-space: nowrap; position: sticky; top: 0; }
.rt__table code { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; color: var(--ink-900); letter-spacing: .04em; }
.rt__table td { line-height: 1.6; color: var(--ink-700); }
.rt__col--code { width: 92px; }
.rt__col--badge { width: 110px; }
.rt__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 节日倒计时（cd-） ---------- */
.cd__next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 20px;
  border: 1px solid var(--accent-400); border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--accent-50), var(--paper));
}
.cd__next-label { font-size: 12.5px; font-weight: 700; color: var(--accent-700); letter-spacing: .04em; }
.cd__next-name { font-size: 19px; color: var(--ink-900); }
.cd__next-count { font-size: 13.5px; color: var(--ink-600); }
.cd__next-count b { font-size: 22px; font-weight: 800; color: var(--accent-700); letter-spacing: -.02em; }
.cd__next-date { font-size: 13px; color: var(--ink-500); font-family: var(--font-mono); }
.cd__next-note { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.65; }
.cd__wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cd__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cd__table th, .cd__table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.cd__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; white-space: nowrap; }
.cd__table code { font-family: var(--font-mono); font-weight: 700; color: var(--ink-900); }
.cd__year th {
  background: var(--brand-50); color: var(--brand-800); font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; border-bottom: 1px solid var(--line);
}
.cd__row.is-past td { color: var(--ink-400); }
.cd__row.is-today { background: var(--jade-100); }
.cd__lunar { display: block; font-size: 12px; color: var(--accent-700); }
.cd__en { display: block; font-size: 11.5px; color: var(--ink-400); letter-spacing: .02em; }
.cd__days { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd__note { color: var(--ink-500); line-height: 1.6; }
.cd__foot { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 官方入口卡（oe-） ---------- */
.oe__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.oe__card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.oe__card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.oe__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.oe__name { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink-900); }
.oe__desc { margin: 0; font-size: 13.5px; color: var(--ink-600); line-height: 1.65; }
.oe__host { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-400); font-family: var(--font-mono); }
.oe__host svg { width: 14px; height: 14px; flex: 0 0 14px; }
.oe__steps { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.oe__steps li { font-size: 13px; color: var(--ink-600); line-height: 1.6; }
.oe__tip { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 12.5px; color: var(--ink-500); line-height: 1.65; }
.oe__tip svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--info-600); }
.oe__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.oe__note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 时区时钟（tz-） ---------- */
.tz__reference {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 14px 18px;
  border: 1px solid var(--brand-200); border-radius: var(--r-md); background: var(--brand-50);
}
.tz__reference-label { font-size: 12.5px; font-weight: 700; color: var(--brand-800); letter-spacing: .04em; }
.tz__reference-time { font-size: 24px; font-weight: 800; color: var(--brand-900); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tz__reference-meta { font-size: 12.5px; color: var(--ink-500); }
.tz__wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tz__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tz__table th, .tz__table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.tz__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; white-space: nowrap; }
.tz__table code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-600); }
.tz__cities { display: block; font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }
.tz__offset { display: block; font-size: 11.5px; color: var(--ink-400); }
.tz__time { font-family: var(--font-mono); font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tz__date { font-size: 12.5px; color: var(--ink-500); white-space: nowrap; }
.tz__diff { color: var(--accent-700); white-space: nowrap; }
.tz__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 驾照笔试题（quiz-） ---------- */
.quiz__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quiz__score { font-size: 13px; color: var(--ink-500); }
.quiz__score strong { font-size: 20px; font-weight: 800; color: var(--jade-700); margin: 0 3px; }
.quiz__list { display: grid; gap: 14px; margin-top: 16px; }
.quiz__q { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.quiz__stem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ink-800); line-height: 1.55; }
.quiz__no {
  flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: var(--brand-surface); color: #fff; font-size: 12.5px; font-weight: 700;
}
.quiz__options { display: grid; gap: 8px; }
.quiz__option {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  font: inherit; font-size: 13.5px; color: var(--ink-700); line-height: 1.55;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.quiz__option:hover { border-color: var(--brand-600); background: var(--brand-50); }
.quiz__option.is-correct { border-color: var(--jade-600); background: var(--jade-100); color: var(--jade-700); font-weight: 600; }
.quiz__option.is-wrong { border-color: var(--danger-600); background: var(--danger-100); color: var(--danger-600); }
.quiz__option-key {
  flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs); background: var(--paper-3); color: var(--ink-600); font-size: 12px; font-weight: 700;
}
.quiz__option.is-correct .quiz__option-key { background: var(--jade-surface); color: #fff; }
.quiz__option.is-wrong .quiz__option-key { background: var(--danger-surface); color: #fff; }
.quiz__explain { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.quiz__explain summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-800); }
.quiz__explain-body { margin-top: 8px; font-size: 13px; color: var(--ink-600); line-height: 1.7; }
.quiz__explain-body p { margin: 0 0 6px; }
.quiz__answer { font-weight: 700; color: var(--jade-700); }
.quiz__note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 通用计算器（calc-） ---------- */
.calc__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.calc__control { display: flex; align-items: center; gap: 8px; }
.calc__control input, .calc__control select { flex: 1 1 auto; min-width: 0; }
.calc__suffix { flex: none; font-size: 12.5px; color: var(--ink-400); font-weight: 600; }
.calc__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.calc__cell { padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); }
.calc__cell--total { background: linear-gradient(135deg, var(--accent-50), var(--paper)); border-color: var(--accent-400); }
.calc__label { display: block; font-size: 12.5px; color: var(--ink-500); }
.calc__value { display: block; margin-top: 4px; font-size: 24px; font-weight: 800; color: var(--brand-900); letter-spacing: -.02em; }
.calc__cell--total .calc__value { color: var(--accent-700); }
.calc__hint { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-400); }
.calc__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 汇率走势图（rc-） ---------- */
.rc__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.rc__submit { height: 42px; display: inline-flex; align-items: center; gap: 7px; }
.rc__submit svg { width: 16px; height: 16px; }
.rc__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.rc__stat { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-2); }
.rc__stat-label { display: block; font-size: 12.5px; color: var(--ink-500); }
.rc__stat-value { display: block; margin-top: 3px; font-size: 21px; font-weight: 800; color: var(--brand-900); letter-spacing: -.02em; }
.rc__stat-hint { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-400); }
.rc__stat--change.is-up .rc__stat-value { color: var(--danger-600); }
.rc__stat--change.is-down .rc__stat-value { color: var(--jade-700); }
.rc__figure { margin: 18px 0 0; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.rc__chart { display: block; width: 100%; height: auto; color: var(--brand-700); }
.rc__grid { stroke: var(--line); stroke-width: 1; }
.rc__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rc__area { stroke: none; }
.rc__axis { font-size: 11px; fill: var(--ink-400); font-family: var(--font-mono); }
.rc__caption { margin: 8px 0 0; font-size: 12px; color: var(--ink-400); text-align: center; }
.rc__wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc__table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rc__table th, .rc__table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: right; }
.rc__table th:first-child, .rc__table td:first-child { text-align: left; }
.rc__table thead th { background: var(--paper-2); color: var(--ink-600); font-size: 12.5px; }
.rc__table code { font-family: var(--font-mono); color: var(--ink-800); }
.rc__meta { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-400); }
.rc__meta--warn { color: var(--accent-700); }
.rc__empty { margin-top: 16px; }
.rc__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-400); line-height: 1.7; }

/* ---------- 程序化广告预留位（ad-reserve） ----------
   空容器，接入 AdSense / 联盟广告时把代码注入 [data-ad-slot] 即可。
   未接入时默认 hidden（零占位）；启用后按尺寸档预留高度，避免广告注入造成布局位移。 */
.ad-reserve {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 26px auto; padding: 12px;
  border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--paper-2);
  overflow: hidden;
}
.ad-reserve__tag {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-400);
}
.ad-reserve__size { font-size: 12px; color: var(--ink-400); font-family: var(--font-mono); }
.ad-reserve--leaderboard { min-height: 90px; }
.ad-reserve--rectangle { min-height: 280px; }
.ad-reserve--footer { min-height: 90px; }

/* ---------- 窄屏降级 ---------- */
@media (max-width: 900px) {
  .uc__form,
  .rt__form,
  .rc__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc__swap { justify-self: start; }
  .uc__tables { grid-template-columns: minmax(0, 1fr); }
  .rt__submit,
  .rc__submit { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 620px) {
  .uc__form,
  .rt__form,
  .rc__form { grid-template-columns: minmax(0, 1fr); }
  .uc__result strong { font-size: 27px; }
  .calc__value { font-size: 21px; }
  .rc__stat-value { font-size: 19px; }
  .oe__grid { grid-template-columns: minmax(0, 1fr); }
  .cd__next { padding: 14px 16px; }
  .quiz__q { padding: 14px; }
  .ad-reserve--rectangle { min-height: 240px; }
  .ad-reserve__tag, .ad-reserve__size { font-size: 11.5px; }
}

/* 触屏热区：换算工具的互换按钮与参照表查询键是 42px 的方形件，
   在手机上是主要操作，补到 44px。 */
@media (hover: none) and (pointer: coarse) {
  .uc__swap { width: 44px; height: 44px; }
  .rt__submit { height: 44px; }
}