/* MileThree brand override for the standalone handbook and conveyor pages.
   Colors, fonts, and surfaces only. Layout, animation, and visibility stay
   with the original stylesheet and Tailwind. */

:root {
  --m3-maroon-base: #470a11;
  --m3-maroon-light: #581018;
  --m3-maroon-dark: #2e0509;
  --m3-field-gold: #dda228;
  --m3-field-gold-bright: #f5c754;
  --m3-field-gold-dark: #b37b12;
  --m3-steel-grey: #7d8790;
  --m3-steel-light: #aeb7bf;
  --m3-steel-dark: #565f67;
  --m3-signal-white: #ffffff;
  --m3-panel-bg: #161b22;
}

html {
  color-scheme: dark;
  background-color: var(--m3-maroon-dark) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

body {
  background-color: var(--m3-maroon-dark) !important;
  color: var(--m3-signal-white) !important;
  font-family: inherit !important;
}

.font-mono,
pre,
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

::selection {
  background-color: var(--m3-field-gold) !important;
  color: var(--m3-maroon-dark) !important;
}

input,
select,
textarea {
  accent-color: var(--m3-field-gold);
}

[class~="placeholder-slate-400"]::placeholder {
  color: var(--m3-steel-light) !important;
  opacity: 1 !important;
}

/* Page, frame, cards, and code surfaces. Both theme classes stay dark enough for white text. */
[class~="bg-slate-100"],
[class~="bg-slate-50"],
[class~="bg-white"],
[class~="bg-white/95"] {
  background-color: var(--m3-maroon-base) !important;
}

html.dark [class~="dark:bg-slate-950"] {
  background-color: var(--m3-maroon-dark) !important;
}

html.dark [class~="dark:bg-slate-900"],
html.dark [class~="dark:bg-slate-900/60"],
html.dark [class~="dark:bg-slate-900/70"],
html.dark [class~="dark:bg-slate-900/95"],
[class~="bg-slate-900/90"] {
  background-color: var(--m3-maroon-base) !important;
}

[class~="bg-slate-800"],
[class~="bg-slate-800/80"],
[class~="bg-slate-800/90"],
[class~="bg-slate-700"],
html.dark [class~="dark:bg-slate-800"],
html.dark [class~="dark:bg-slate-800/60"],
html.dark [class~="dark:bg-slate-800/90"] {
  background-color: var(--m3-maroon-light) !important;
}

[class~="bg-slate-900"],
[class~="bg-slate-950"] {
  background-color: var(--m3-panel-bg) !important;
}

[class~="bg-amber-500/10"],
[class~="bg-amber-500/15"],
[class~="bg-amber-500/20"],
[class~="bg-amber-500/30"],
[class~="bg-emerald-500/10"],
[class~="bg-emerald-500/15"],
[class~="bg-emerald-500/20"],
[class~="bg-rose-500/15"],
[class~="bg-rose-500/20"],
[class~="bg-rose-500/30"],
[class~="bg-sky-500/10"],
[class~="bg-sky-500/20"],
[class~="bg-sky-500/30"] {
  background-color: var(--m3-maroon-light) !important;
}

[class~="bg-sky-400"],
[class~="bg-sky-500"] {
  background-color: var(--m3-steel-light) !important;
}

[class~="bg-emerald-400"] {
  background-color: var(--m3-field-gold) !important;
}

/* Text. text-slate-950 sits on gold fills, so it stays maroon. */
[class~="text-white"],
[class~="text-slate-200"],
[class~="text-slate-800"],
[class~="text-slate-900"],
html.dark [class~="dark:text-white"],
html.dark [class~="dark:text-slate-100"],
html.dark [class~="dark:text-slate-200"] {
  color: var(--m3-signal-white) !important;
}

[class~="text-slate-300"],
[class~="text-slate-400"],
[class~="text-slate-500"],
[class~="text-slate-600"],
[class~="text-slate-700"],
html.dark [class~="dark:text-slate-300"],
html.dark [class~="dark:text-slate-400"],
html.dark [class~="dark:text-slate-500"] {
  color: var(--m3-steel-light) !important;
}

[class~="text-slate-950"] {
  color: var(--m3-maroon-dark) !important;
}

[class~="text-amber-300"],
[class~="text-amber-400"],
[class~="text-amber-500"],
[class~="text-amber-600"],
[class~="text-emerald-300"],
[class~="text-emerald-400"],
[class~="text-emerald-500"],
[class~="text-emerald-600"],
[class~="text-sky-300"],
[class~="text-sky-400"],
[class~="text-teal-400"],
[class~="text-rose-300"],
[class~="text-rose-400"],
html.dark [class~="dark:text-amber-400"],
html.dark [class~="dark:text-emerald-400"] {
  color: var(--m3-field-gold-bright) !important;
}

/* Borders */
[class~="border-slate-200"],
[class~="border-slate-300"],
[class~="border-slate-600"],
[class~="border-slate-700"],
[class~="border-slate-700/70"],
[class~="border-slate-700/80"],
[class~="border-slate-800"],
[class~="border-slate-800/90"],
html.dark [class~="dark:border-slate-700"],
html.dark [class~="dark:border-slate-700/60"],
html.dark [class~="dark:border-slate-700/80"],
html.dark [class~="dark:border-slate-800"] {
  border-color: var(--m3-steel-dark) !important;
}

[class~="border-amber-200"],
[class~="border-amber-400"],
[class~="border-amber-500"],
[class~="border-amber-500/40"],
[class~="border-amber-500/60"],
[class~="border-emerald-400"],
[class~="border-emerald-500"],
[class~="border-emerald-500/40"],
[class~="border-emerald-500/50"],
[class~="border-emerald-500/60"] {
  border-color: var(--m3-field-gold) !important;
}

[class~="border-rose-500/30"],
[class~="border-rose-500/40"],
[class~="border-rose-500/60"],
[class~="border-sky-400"],
[class~="border-sky-500/40"],
[class~="border-sky-500/50"] {
  border-color: var(--m3-field-gold-bright) !important;
}

[class~="ring-white"],
html.dark [class~="dark:ring-slate-900"] {
  --tw-ring-color: var(--m3-maroon-dark) !important;
}

[class~="focus:ring-amber-500"]:focus {
  --tw-ring-color: var(--m3-field-gold) !important;
}

/* Gradients used by the icon tile, hero, and moving box. */
[class~="bg-gradient-to-br"][class~="from-amber-500"],
[class~="bg-gradient-to-br"][class~="from-emerald-500"],
[class~="bg-gradient-to-br"][class~="from-amber-400"] {
  background-image: linear-gradient(to bottom right, var(--m3-field-gold-bright), var(--m3-field-gold-dark)) !important;
}

[class~="bg-gradient-to-br"][class~="from-slate-900"] {
  background-image: linear-gradient(to bottom right, var(--m3-maroon-dark), var(--m3-maroon-base)) !important;
}

/* Live ladder and belt colors from the original <style> block. */
.node-energized,
.node-on {
  border-color: var(--m3-field-gold) !important;
  background-color: var(--m3-maroon-light) !important;
  color: var(--m3-field-gold-bright) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--m3-field-gold) 35%, transparent) !important;
}

.node-fault {
  border-color: var(--m3-field-gold-bright) !important;
  background-color: var(--m3-maroon-dark) !important;
  color: var(--m3-field-gold-bright) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--m3-field-gold-bright) 40%, transparent) !important;
}

.rung-wire-on {
  background-color: var(--m3-field-gold) !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--m3-field-gold) 80%, transparent) !important;
}

.wire-energized {
  stroke: var(--m3-field-gold) !important;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--m3-field-gold) 70%, transparent)) !important;
}

.belt-Texture {
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--m3-steel-light) 45%, transparent) 0px,
    color-mix(in srgb, var(--m3-steel-light) 45%, transparent) 4px,
    transparent 4px,
    transparent 12px
  ) !important;
}

/* Solid gold and stop controls. These follow the text rules so the label stays AA. */
[class~="bg-amber-500"],
[class~="bg-emerald-500"],
[class~="bg-emerald-600"],
[class~="hover:bg-amber-400"]:hover,
[class~="hover:bg-emerald-500"]:hover {
  background-color: var(--m3-field-gold) !important;
  color: var(--m3-maroon-dark) !important;
  border-color: var(--m3-field-gold-dark) !important;
}

[class~="bg-rose-600"],
[class~="hover:bg-rose-500"]:hover {
  background-color: var(--m3-maroon-dark) !important;
  color: var(--m3-field-gold-bright) !important;
  border-color: var(--m3-field-gold-bright) !important;
}

[class~="hover:bg-slate-200"]:hover,
[class~="hover:bg-slate-600"]:hover,
html.dark [class~="dark:hover:bg-slate-700"]:hover {
  background-color: var(--m3-maroon-light) !important;
}

[class~="hover:text-slate-200"]:hover {
  color: var(--m3-signal-white) !important;
}