/* AllTheSystems shared tool skin — generated 2026-07-04 (Loby)
   Tokens + header bar + loading veil for all /<tool>/ static pages. */
:root {
  --ats-bg: #f7f8f5;
  --ats-surface: #ffffff;
  --ats-text: #172026;
  --ats-muted: #5b6470;
  --ats-border: #d9dfd7;
  --ats-accent: #369ef6;
  --ats-accent-text: #ffffff;
  --ats-ok: #00a06e;
  --ats-warn: #b45309;
  --ats-danger: #c62828;
  --ats-code-bg: #f1f5ef;
  --ats-font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ats-mono: ui-monospace, "Cascadia Code", Consolas, "Fira Code", monospace;
}
html[data-theme="dark"], body[data-theme="dark"] {
  --ats-bg: #101820;
  --ats-surface: #172026;
  --ats-text: #e8edf2;
  --ats-muted: #9aa7b2;
  --ats-border: #314048;
  --ats-accent: #369ef6;
  --ats-accent-text: #ffffff;
  --ats-ok: #79d2a6;
  --ats-warn: #f0b429;
  --ats-danger: #ef6a5a;
  --ats-code-bg: #0f171c;
}
/* --- header bar --- */
.ats-bar {
  position: sticky; top: 0; z-index: 9999;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem 1rem;
  background: var(--ats-surface);
  color: var(--ats-text);
  border-bottom: 1px solid var(--ats-border);
  font-family: var(--ats-font); font-size: 0.95rem; line-height: 1;
  box-sizing: border-box;
}
.ats-bar a { color: var(--ats-text); text-decoration: none; }
.ats-bar a:hover { color: var(--ats-accent); }
.ats-bar .ats-home { font-weight: 700; letter-spacing: 0.02em; }
.ats-bar .ats-home span { color: var(--ats-accent); }
.ats-bar .ats-alltools { color: var(--ats-muted); font-size: 0.85rem; }
.ats-bar .ats-spacer { flex: 1; }
.ats-theme-toggle {
  cursor: pointer; border: 1px solid var(--ats-border);
  background: transparent; color: var(--ats-text);
  border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.85rem;
  font-family: var(--ats-font);
}
.ats-theme-toggle:hover { border-color: var(--ats-accent); color: var(--ats-accent); }
/* --- loading veil --- */
#ats-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  background: var(--ats-bg); color: var(--ats-muted);
  font-family: var(--ats-font); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 1; transition: opacity 0.25s ease;
}
#ats-loader.ats-done { opacity: 0; pointer-events: none; }
#ats-loader .ats-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--ats-border); border-top-color: var(--ats-accent);
  animation: ats-spin 0.8s linear infinite;
}
@keyframes ats-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #ats-loader { display: none; }
  #ats-loader .ats-spin { animation: none; }
}
/* hide bespoke per-page theme toggles — the bar toggle is the single control */
.dark-toggle, #modeToggle, #darkToggle, #toggle-dark, #toggle-theme, #themeToggle,
#toggleDarkMode, .theme-btn, .toggle-theme, .dark-mode-toggle, .theme-switch, .toggle-mode { display: none !important; }
/* native form-control theming + sensible defaults (page CSS still wins) */
:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
input, textarea, select { background-color: var(--ats-surface); color: var(--ats-text); border: 1px solid var(--ats-border); }
/* suppress transitions during initial theme application (no flash, stable screenshots) */
html.ats-boot * { transition: none !important; }