/* World of Warcraft free tools (Batch 172) — tools/wow_leveling.html and tools/wow_forever_countdown.html.
   Loaded after content.css + wow.css (the countdown boxes .wow-cd, the pill, .wow-strip-cd come from wow.css).
   Everything here is prefixed .wt- except the .tool-wow theme, which recolours the shared tool kit gold
   the way .tool-wardogs makes it green. */
.tool-wow { --taccent: #e3b341; --accent-hot: #f2c75c; --accent: #e3b341; --accent-rgb: 227,179,65; --accent-deep: #b8892a;
  --accent-ink: #1a1205; --accent-btn: #e3b341; }
.tool-wow .rut-tab.is-on { color: #1a1205; }

/* ---- leveling calculator */
.wt-card { --wowc: var(--wow, #e3b341); }
.wt-vtabs { gap: 7px; margin-bottom: 14px; }
.wt-vtab { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 6px 13px 6px 7px; }
.wt-vtab:hover { text-decoration: none; }
.wt-vtab img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.wt-vtab .wt-vs { display: none; }
.wt-vtab.is-on { background: linear-gradient(180deg, color-mix(in srgb, var(--wowc) 82%, #fff), var(--wowc));
  border-color: var(--wowc); color: #120d08; }
.wt-vfacts { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--wowc) 35%, var(--border)); }
.wt-vname { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.wt-vname b { color: var(--text); font-size: 14.5px; }
.wt-vname span { color: var(--wowc); font: 700 11px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.wt-vfacts ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.wt-vfacts li::marker { color: var(--wowc); }
.wt-levels { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.wt-levels .bxc-num { font-size: 16px; font-weight: 700; }
.wt-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.wt-chip { padding: 6px 11px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
  font: 650 12.5px/1 var(--font); font-variant-numeric: tabular-nums; }
.wt-chip:hover { text-decoration: none; color: var(--text); border-color: color-mix(in srgb, var(--wowc) 60%, var(--border)); }
.wt-go { margin-top: 12px; }
.wt-opt .bxc-opt-h { color: var(--wowc); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wt-pct { font: 700 11px/1 var(--font); letter-spacing: .02em; text-transform: none; color: var(--text-muted);
  padding: 3px 6px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); }
.wt-opt.is-main { border-color: color-mix(in srgb, var(--wowc) 55%, var(--border-strong));
  background: radial-gradient(120% 150% at 82% 0%, color-mix(in srgb, var(--wowc) 16%, transparent), transparent 60%), var(--bg); }
.wt-opt .bxc-opt-go { color: var(--wowc); }
.wt-opt:hover { border-color: var(--wowc); }
.wt-pace { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }
.wt-pace b { color: var(--text); margin-right: 4px; }
.wt-pace a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.wt-table td, .wt-table th { vertical-align: top; }
.wt-table td s { color: var(--text-faint); font-size: 12px; }

/* ---- Forever launch countdown */
.wt-fc { overflow: hidden;
  background: radial-gradient(80% 120% at 0% 0%, rgba(var(--wow-rgb, 227,179,65),.20), transparent 55%),
              linear-gradient(160deg, #19130b, var(--panel) 62%);
  border-color: rgba(var(--wow-rgb, 227,179,65),.42); }
.wt-fc-kick { margin-bottom: 4px; }
.wt-fc-h { margin: 14px 0 14px; font: 700 30px/1.12 var(--font-display); letter-spacing: -.01em; color: var(--text); }
.wt-local { margin: 4px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.wt-local-l { font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.wt-local b { color: #ffe7a8; font-size: 18px; }
.wt-local small { color: var(--text-faint); font-size: 12.5px; }
.wt-tz[hidden] { display: none; }
.wt-utc { margin: 0 0 16px; font-size: 12.5px; color: var(--text-faint); }
.wt-fc-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 18px; padding: 11px 14px; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(var(--wow-rgb, 227,179,65),.30); font-size: 13.5px; color: var(--text-muted); }
.wt-fc-next-l { color: var(--text); font-weight: 650; }
.wt-fc-next-d { color: var(--text-faint); font-size: 12.5px; }
.wt-fc-cta { margin-bottom: 4px; }
.wt-fc .rut-fine a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.wt-times .wt-utc-row td { background: rgba(var(--wow-rgb, 227,179,65),.06); }
.wt-you td { background: rgba(var(--wow-rgb, 227,179,65),.14); color: var(--text); }
.wt-you small { color: var(--text-faint); font-weight: 500; margin-left: 4px; }
.wt-you[hidden] { display: none; }
.wt-pre-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.wt-pre-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--bg);
  border: 1px solid var(--border-strong); color: var(--text); transition: border-color .15s, transform .15s; }
.wt-pre-card:hover { text-decoration: none; border-color: var(--wow, #e3b341); transform: translateY(-1px); }
.wt-pre-h { font-weight: 750; font-size: 15px; line-height: 1.3; }
.wt-pre-l { font-size: 13px; color: var(--text-muted); line-height: 1.45; flex: 1; }
.wt-pre-s { font-size: 12px; color: var(--text-faint); }
.wt-pre-p { font: 800 20px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.wt-pre-p s { font-size: 13px; color: var(--text-faint); font-weight: 600; }
.wt-pre-card .bxc-opt-go { color: var(--wow, #e3b341); }

@media (max-width: 760px) {
  .wt-levels { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .wt-levels .wt-region { grid-column: 1 / -1; }
  .wt-levels .lbc-arrow { display: block; }
  .wt-pre-grid { grid-template-columns: minmax(0, 1fr); }
  .wt-fc-h { font-size: 25px; }
}
@media (max-width: 560px) {
  .wt-vtabs { gap: 6px; }
  .wt-vtab { font-size: 12.5px; padding: 5px 10px 5px 5px; gap: 6px; }
  .wt-vtab .wt-vn { display: none; }
  .wt-vtab .wt-vs { display: inline; }
  .wt-lvl-table th:nth-child(3), .wt-lvl-table td:nth-child(3) { display: none; }
  .wt-table th, .wt-table td { padding-left: 8px; padding-right: 8px; }
  .wt-times td:nth-child(2) b, .wt-times td:nth-child(2) { white-space: nowrap; }
  .wt-vtab img { width: 20px; height: 20px; }
  .wt-local b { font-size: 16px; }
  .wt-fc .wow-launch-cta .btn { flex: 1 1 100%; justify-content: center; }
}
.wt-min { font-weight: 600; font-size: 12px; color: var(--text-faint); }
/* Batch 176 (UI check): the pre-order button ran past its card at ≤ 360 px ("from $7." cut) */
.wt-fc-cta .btn { white-space: normal; max-width: 100%; text-align: center; }
@media (max-width: 420px) { .wt-fc-cta { display: grid; gap: 8px; } .wt-fc-cta .btn { width: 100%; justify-content: center; } }