/* DTOC atmosphere + skins — graduated from dashboard/prototypes/dtoc-skins.css +
   dtoc-modes.js (branch v2/dtoc-board-spike; 6da8f3c flag, e8f1324 5-point stars).
   INCREMENT 2: 6 skins (dark/light/MultiCam/MultiCam-Black/MARPAT WD/MARPAT DE) via
   the MODE switcher, the faint flag kept visible on EVERY skin (recolored to the skin
   — patriotic on dark/light, monochrome-accent on the camo skins), and the procedural
   camo texture on camo skins. main.css owns the scanline/grid overlay + .card/.btn/
   .badge, so only atmosphere + skin tokens + the MODE switcher live here. */

/* ── base (dark) tokens the skins inherit from main.css; here we add the atmosphere
   opacities + the flag part-colors (patriotic default). ── */
:root {
  --flag-op: .20; --amb-op: .5; --camo-op: 0;
  --flag-a: #b3132e;   /* stripe (light) */
  --flag-b: #7a0f22;   /* stripe (dark)  */
  --flag-canton: #0a2144;
  --flag-star: #e6ecf7;
}

/* ── SKINS (token overrides drive the whole palette; main.css supplies dark defaults) ── */
[data-skin="light"]{
  --bg-base:#EDEFF2; --bg-surface:#F7F8FA; --bg-raised:#FFFFFF; --bg-overlay:#ECEFF3; --bg-hover:#E3E8EE;
  --border:rgba(40,52,66,0.14); --border-dim:rgba(0,0,0,0.06); --border-bright:rgba(200,16,46,0.32);
  --red-text:#B00C24; --red-glow:rgba(200,16,46,0.08);
  --amber-text:#9A6A05; --amber-glow:rgba(212,144,10,0.12);
  --green-text:#0D7A3E; --green-glow:rgba(13,122,62,0.12); --blue-text:#1565C0; --gold-text:#8A6D18;
  --text-primary:#0F1720; --text-secondary:#43566A; --text-muted:#77879A; --text-dim:#AEBAC6;
  --grid-color:rgba(0,0,0,0.028);
  --flag-op:.14; --amb-op:.18;
  /* light bg: recolor to a deeper patriotic so it reads under a MULTIPLY blend */
  --flag-a:#c8102e; --flag-b:#8b0b1f; --flag-canton:#0a1f45; --flag-star:#6a7ba8;
}
[data-skin="multicam"]{
  --bg-base:#12100A; --bg-surface:#181510; --bg-raised:#221C14; --bg-overlay:#2B231A; --bg-hover:#342A1F;
  --border:rgba(176,150,110,0.14); --border-dim:rgba(255,240,214,0.045); --border-bright:rgba(166,124,75,0.34);
  --red:#A67C4B; --red-dark:#6E5230; --red-glow:rgba(166,124,75,0.16); --red-text:#D9B380;
  --amber:#C79A3E; --amber-text:#E6C36B; --green:#6B7A45; --green-text:#A7BE73;
  --blue:#6E7C8A; --blue-text:#AFC0CE; --gold:#B8952A; --gold-text:#E0C271;
  --text-primary:#EFE6D6; --text-secondary:#B7A88C; --text-muted:#6E6250; --text-dim:#453B2C;
  --grid-color:rgba(255,240,214,0.02);
  --flag-op:.16; --amb-op:.4; --camo-op:.22;
  --flag-a:var(--red); --flag-b:var(--red-dark); --flag-canton:var(--red-dark); --flag-star:var(--red-text);
}
[data-skin="multicam-black"]{
  --bg-base:#101012; --bg-surface:#161619; --bg-raised:#1E1E22; --bg-overlay:#26262B; --bg-hover:#2F2F35;
  --border:rgba(180,182,190,0.13); --border-dim:rgba(255,255,255,0.04); --border-bright:rgba(190,172,146,0.30);
  --red:#7C7C84; --red-dark:#46464C; --red-glow:rgba(160,160,168,0.13); --red-text:#CBC6BE;
  --amber-text:#D8BE7A; --green-text:#9FB08C; --blue-text:#AEB8C4; --gold-text:#CBBB82;
  --text-primary:#E7E7E9; --text-secondary:#A8A8AE; --text-muted:#5E5E67; --text-dim:#343439;
  --grid-color:rgba(255,255,255,0.02);
  --flag-op:.16; --amb-op:.4; --camo-op:.24;
  --flag-a:var(--red); --flag-b:var(--red-dark); --flag-canton:var(--red-dark); --flag-star:var(--red-text);
}
[data-skin="marpat-woodland"]{
  --bg-base:#0A0E0A; --bg-surface:#0F140F; --bg-raised:#161D15; --bg-overlay:#1E271D; --bg-hover:#263125;
  --border:rgba(124,150,102,0.14); --border-dim:rgba(228,240,214,0.04); --border-bright:rgba(94,115,70,0.34);
  --red:#5E7346; --red-dark:#3C4A2C; --red-glow:rgba(94,115,70,0.18); --red-text:#9CB877;
  --amber-text:#D8BE6A; --green:#4C7A3E; --green-text:#7FD08A; --blue-text:#A5C7B4; --gold-text:#D3BB63;
  --text-primary:#E4EAD9; --text-secondary:#A2B38C; --text-muted:#5E6E4E; --text-dim:#333F2C;
  --grid-color:rgba(228,240,214,0.02);
  --flag-op:.16; --amb-op:.4; --camo-op:.24;
  --flag-a:var(--red); --flag-b:var(--red-dark); --flag-canton:var(--red-dark); --flag-star:var(--red-text);
}
[data-skin="marpat-desert"]{
  --bg-base:#141009; --bg-surface:#1A150D; --bg-raised:#241D12; --bg-overlay:#2D2417; --bg-hover:#372C1C;
  --border:rgba(190,168,120,0.14); --border-dim:rgba(255,244,214,0.045); --border-bright:rgba(176,140,84,0.34);
  --red:#B08C54; --red-dark:#6E5230; --red-glow:rgba(176,140,84,0.16); --red-text:#E0C288;
  --amber-text:#E6C36B; --green-text:#B6BE73; --blue-text:#C6BE98; --gold-text:#E0C271;
  --text-primary:#F0E7D2; --text-secondary:#BEAC86; --text-muted:#75674E; --text-dim:#483D2A;
  --grid-color:rgba(255,244,214,0.02);
  --flag-op:.16; --amb-op:.4; --camo-op:.22;
  --flag-a:var(--red); --flag-b:var(--red-dark); --flag-canton:var(--red-dark); --flag-star:var(--red-text);
}

/* ── BACKGROUND LAYERS ── */
#flag {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--flag-op); mix-blend-mode: screen;
  -webkit-mask: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 84%);
          mask: radial-gradient(ellipse at 50% 40%, #000 40%, transparent 84%);
}
/* light bg lightens under screen (flag vanishes) → darken it with multiply instead */
[data-skin="light"] #flag { mix-blend-mode: multiply; }
#flag .fa { fill: var(--flag-a); }
#flag .fb { fill: var(--flag-b); }
#flag .canton { fill: var(--flag-canton); }
#flag #stars { fill: var(--flag-star); }
#camo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--camo-op); display: none;
  -webkit-mask: radial-gradient(ellipse at 50% 42%, #000 30%, rgba(0,0,0,.55) 78%, transparent 100%);
          mask: radial-gradient(ellipse at 50% 42%, #000 30%, rgba(0,0,0,.55) 78%, transparent 100%);
}
[data-skin="multicam"] #camo, [data-skin="multicam-black"] #camo,
[data-skin="marpat-woodland"] #camo, [data-skin="marpat-desert"] #camo { display: block; }
#ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--amb-op); }
@media (prefers-reduced-motion: reduce) { #ambient { display: none; } }

/* ── MODE SWITCHER (lives in the header actions) ── */
.modes { position: relative; }
.modes-btn {
  display: flex; align-items: center; gap: 7px; font-family: var(--font-ui); letter-spacing: 1.5px;
  font-size: 11px; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-raised);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 11px; cursor: pointer; transition: var(--transition);
}
.modes-btn:hover { border-color: var(--border-bright); color: var(--red-text); }
.modes-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 210; width: 236px; background: var(--bg-surface);
  border: 1px solid var(--border-bright); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; display: none;
}
.modes-pop.open { display: block; }
.mp-grp { font-family: var(--font-ui); letter-spacing: 2px; font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; margin: 4px 0 7px; }
.mp-grp:not(:first-child) { margin-top: 14px; }
.mp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mp-opt {
  display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); letter-spacing: .5px; font-size: 11px;
  text-transform: uppercase; color: var(--text-secondary); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: 7px 8px; cursor: pointer; transition: var(--transition);
}
.mp-opt:hover { background: var(--bg-hover); }
.mp-opt.sel { border-color: var(--red); color: var(--red-text); background: var(--red-glow); }
.mp-opt .sw { width: 12px; height: 12px; border-radius: 2px; flex: none; border: 1px solid rgba(255,255,255,.18); background-size: cover; }

/* ── Brand avatar (replaces the ▣ sigil; falls back to logo.png if missing).
   The R.E.DACTED.BOT emblem is a tall shield badge, so CONTAIN it (no circle crop)
   and let the red-glow drop-shadow sell it. ── */
.brand-avatar { height: 42px; width: auto; max-width: 48px; object-fit: contain; flex: none;
  filter: drop-shadow(0 0 8px var(--red-glow)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.navbar-min .brand-avatar { height: 38px; }
.login-avatar { display: block; height: 72px; width: auto; max-width: 96px; margin: 0 auto 12px; object-fit: contain;
  filter: drop-shadow(0 0 14px var(--red-glow)) drop-shadow(0 2px 4px rgba(0,0,0,.6)); }