/* ═══════════════════════════════════════════════════════════════════════
   Emerald Atelier — design tokens (SINGLE SOURCE OF TRUTH, R08).
   Spec: docs/UXUI_REVIEW_20260703.md §3 · DEC-2026-07-03-uxui-option-b-token-refit.
   Consumed by: templates/base.html (Tailwind theme reads the CSS variables),
   dashboard_routers/atlas.py _CSS, and the login page in dashboard_cloud.py.
   Values are raw RGB triplets so Tailwind can compose opacity:
   use as  rgb(var(--ink))  or Tailwind  text-ink / bg-surface / border-hairline.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* color tokens (§3.1) */
  --canvas: 10 10 11;        /* #0A0A0B — the ONE page black, everywhere   */
  --surface: 20 20 22;       /* #141416 — cards                            */
  --surface-2: 28 28 31;     /* #1C1C1F — nested tiles, thead, hover       */
  --hairline: 42 42 46;      /* #2A2A2E — the ONE border color             */
  --ink: 242 241 236;        /* #F2F1EC — primary text (warm ivory)        */
  --ink-2: 180 179 173;      /* #B4B3AD — secondary text (≥4.5:1)          */
  --ink-3: 132 131 126;      /* #84837E — captions/eyebrows (≈4.6:1, ≥12px)*/
  --accent: 16 185 129;      /* #10B981 — THE accent                       */
  --accent-ink: 6 42 30;     /* #062A1E — text on accent fills             */
  --pos: 52 211 153;         /* #34D399 — P&L / deltas up ONLY             */
  --neg: 240 101 93;         /* #F0655D — P&L / deltas down, alerts        */
  --warn: 217 164 65;        /* #D9A441 — warnings only (the one amber)    */
}

/* ── type scale (§3.1) — floor is 12px (task-hardened from the review's 11px;
      the stricter constraint wins). Body 14px. Tabular numerals everywhere. ── */
.t-display { font-size: 26px; font-weight: 300; line-height: 1.2; }
.t-title   { font-size: 16px; font-weight: 500; line-height: 1.3; }
.t-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .08em; color: rgb(var(--ink-3)); }
.t-kpi     { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums;
             line-height: 1.2; }
.t-body    { font-size: 14px; font-weight: 400; }
.t-caption { font-size: 12px; font-weight: 400; }

/* ── one chip system (§3.2): 999px radius, 12px text, tone carries meaning ── */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
        font-size: 12px; line-height: 1.1; padding: 3px 10px; white-space: nowrap;
        font-variant-numeric: tabular-nums; }
.chip-neutral { background: rgb(var(--surface-2)); color: rgb(var(--ink-2));
                box-shadow: inset 0 0 0 1px rgb(var(--hairline)); }
.chip-accent  { background: rgb(var(--accent) / .12); color: rgb(var(--accent)); }
.chip-neg     { background: rgb(var(--neg) / .12); color: rgb(var(--neg)); }
.chip-warn    { background: rgb(var(--warn) / .14); color: rgb(var(--warn)); }

/* ── one collapse affordance (§3.1): 28px-hit chevron, rotates 180° ── */
.chev { display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; min-width: 28px; border-radius: 8px;
        border: 1px solid rgb(var(--hairline)); background: transparent;
        color: rgb(var(--ink-3)); cursor: pointer; flex: none; padding: 0; }
.chev:hover { color: rgb(var(--ink)); background: rgb(var(--surface-2)); }
.chev svg { width: 14px; height: 14px; transition: transform .18s ease; }
.chev.open svg { transform: rotate(180deg); }

/* ── skeleton loading blocks (P0 #4: header-first render) ── */
.skeleton { background: rgb(var(--surface-2)); border-radius: 8px;
            animation: tok-pulse 1.4s ease-in-out infinite; }
@keyframes tok-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* (the Phase-1 .sidebar-drawer block was removed 2026-07-03 — the sidebar is gone;
   navigation is the shared top-bar + menu overlay below, R08) */

[x-cloak] { display: none !important; }

/* menu deep-link targets land below the 56px sticky top bar */
[id] { scroll-margin-top: 72px; }

/* ═══ Phase-1 legacy overrides (P0 #1/#2) — cheap raise for pages not yet
       refit onto the tokens (Zeus; stragglers). Removed as each page is refit. ═══ */
/* font floor: no rendered text below 12px */
.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: 12px !important; }
/* WCAG contrast: gray-500 (≈3.7:1) and gray-600 (≈2.3:1) on cards → compliant ink-3 */
.text-gray-500, .text-gray-600 { color: rgb(var(--ink-3)) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 2 — Porsche-style entry experience (DEC-2026-07-03-porsche-home-page-and-menu).
   Light-theme token block + the shared top bar / menu overlay component styles.
   Consumed by templates/_menu.html (all pages) and templates/home.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── light theme (Armani white) — the home page body and the menu overlay.
      Same token NAMES as the dark set, so every component reads one vocabulary. ── */
.theme-light, .em-menu {
  --canvas: 250 250 248;     /* warm paper white                          */
  --surface: 255 255 255;
  --surface-2: 243 243 240;
  --hairline: 228 227 222;
  --ink: 20 20 22;
  --ink-2: 92 91 86;         /* ≥4.5:1 on white                           */
  --ink-3: 128 127 122;
  --accent: 5 150 105;       /* emerald-600 — ≥3:1 on white for lines     */
  --accent-ink: 255 255 255;
}

/* ── top bar (all pages): Menu top-left, wordmark top-center like Porsche ── */
.em-topbar { position: sticky; top: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 56px; padding: 0 16px;
  background: rgb(var(--canvas) / .90); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(var(--hairline)); }
.em-menu-btn { justify-self: start; display: inline-flex; align-items: center;
  gap: 9px; border: 0; background: transparent; color: rgb(var(--ink));
  font: 500 13px/1 system-ui, -apple-system, sans-serif; letter-spacing: .05em;
  cursor: pointer; padding: 9px 12px; border-radius: 8px; }
.em-menu-btn:hover { background: rgb(var(--surface-2)); }
.em-menu-btn svg { width: 15px; height: 15px; }
.em-wordmark { justify-self: center; font: 500 13px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: rgb(var(--ink)); text-decoration: none; }
.em-wordmark:hover { color: rgb(var(--accent)); }
.em-topbar-right { justify-self: end; display: inline-flex; align-items: center; }
.em-signout { font: 400 12px/1 system-ui, sans-serif; letter-spacing: .04em;
  color: rgb(var(--ink-3)); text-decoration: none; padding: 8px 10px; }
.em-signout:hover { color: rgb(var(--ink)); }

/* ── left cluster: Menu + Back (data subpages only; JS unhides off-home) ── */
.em-topbar-left { justify-self: start; display: inline-flex; align-items: center; gap: 2px; }
.em-back { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent;
  color: rgb(var(--ink-2)); font: 500 13px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .04em; cursor: pointer; padding: 9px 12px; border-radius: 8px;
  text-decoration: none; }
.em-back:hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
.em-back svg { width: 15px; height: 15px; }
.em-back[hidden] { display: none; }

/* ── real section selection (priority-2, DEC-2026-07-04-light-rollout): a menu
      deep link SELECTS the section — an accent rail + a brief afterglow, no
      scale/zoom. Focus is moved to the heading in JS for a11y. ── */
.em-selected { position: relative; animation: em-afterglow 1.2s ease 1; }
.em-selected::before { content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px;
  width: 3px; border-radius: 2px; background: rgb(var(--accent));
  animation: em-rail-in .35s cubic-bezier(.22,.61,.36,1) both; }
@keyframes em-rail-in { from { opacity: 0; transform: scaleY(.4); }
                        to { opacity: 1; transform: none; } }
@keyframes em-afterglow { 0% { background: rgb(var(--accent) / .08); }
                          100% { background: transparent; } }
.em-selected :focus, .em-selected:focus { outline: none; }

/* ── menu overlay: white left panel over a dimmed page (Porsche/Armani) ── */
.em-menu { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.em-menu.open { visibility: visible; }
.em-menu-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .45);
  opacity: 0; transition: opacity .28s ease; }
.em-menu.open .em-menu-backdrop { opacity: 1; }
.em-menu-panel { position: absolute; top: 0; bottom: 0; left: 0;
  width: min(760px, 100vw); background: rgb(var(--canvas)); color: rgb(var(--ink));
  transform: translateX(-100%); transition: transform .34s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: system-ui, -apple-system, sans-serif; }
.em-menu.open .em-menu-panel { transform: translateX(0); }
.em-menu-head { display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px 0 24px; flex: none; }
.em-menu-close { border: 0; background: transparent; color: rgb(var(--ink));
  cursor: pointer; padding: 10px; border-radius: 8px; line-height: 0; }
.em-menu-close:hover { background: rgb(var(--surface-2)); }
.em-menu-close svg { width: 16px; height: 16px; }
.em-menu-body { flex: 1; display: grid; grid-template-columns: 300px 1fr;
  overflow: hidden; }
.em-menu-col1 { padding: 18px 0 24px; border-right: 1px solid rgb(var(--hairline));
  overflow-y: auto; display: flex; flex-direction: column; }
.em-menu-col2 { padding: 18px 0 24px; overflow-y: auto; }
.em-menu-item { display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  color: rgb(var(--ink)); font: 400 17px/1.2 system-ui, sans-serif;
  letter-spacing: .01em; padding: 13px 22px 13px 24px; text-decoration: none; }
.em-menu-item:hover, .em-menu-item.active { color: rgb(var(--accent)); }
.em-menu-item .arr { color: rgb(var(--ink-3)); font-size: 14px; transition: transform .18s ease; }
.em-menu-item.active .arr { transform: translateX(2px); color: rgb(var(--accent)); }
.em-menu-item small { display: block; font-size: 11.5px; color: rgb(var(--ink-3));
  letter-spacing: .03em; margin-top: 3px; }
.em-menu-sep { height: 1px; background: rgb(var(--hairline)); margin: 12px 24px; flex: none; }
.em-sub { display: none; }
.em-sub.active { display: block; animation: em-sub-in .22s ease; }
@keyframes em-sub-in { from { opacity: 0; transform: translateX(6px); }
                       to { opacity: 1; transform: none; } }
.em-sub-title { display: block; font: 600 12px/1 system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--ink-3));
  padding: 14px 26px 8px; }
.em-sub a { display: flex; align-items: center; justify-content: space-between;
  color: rgb(var(--ink-2)); text-decoration: none; font: 400 15px/1.2 system-ui, sans-serif;
  padding: 10px 26px; }
.em-sub a:hover { color: rgb(var(--accent)); }
.em-sub a .arr { color: rgb(var(--hairline)); font-size: 13px; }
.em-sub a:hover .arr { color: rgb(var(--accent)); }

/* mobile: single column accordion (col2 panes render inline under each item) */
@media (max-width: 767px) {
  .em-menu-panel { width: 100vw; }
  .em-menu-body { grid-template-columns: 1fr; }
  .em-menu-col1 { border-right: 0; }
  .em-menu-col2 { display: none; }
  .em-menu-col1 .em-sub { padding-bottom: 6px; }
}
@media (min-width: 768px) {
  .em-menu-col1 .em-sub { display: none !important; } /* desktop: subs live in col2 */
}
@media (prefers-reduced-motion: reduce) {
  .em-menu-panel, .em-menu-backdrop, .em-sub.active { transition: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Refit primitives (DEC-2026-07-04-home-fit-and-atlas-refit) — the shared
   design language rolled page by page (Atlas pilot → Zeus → flagship). SSOT
   so every page reads one vocabulary (R08).
   ═══════════════════════════════════════════════════════════════════════ */

/* moving underline (Porsche/Armani nav) — grows left→right under a header or
   link on hover. Add .uline to the element; parents can trigger it too, e.g.
   `.cardhdr:hover .uline::after { transform: scaleX(1); }`. */
.uline { position: relative; }
.uline::after { content: ""; position: absolute; left: 0; bottom: -3px;
  height: 1px; width: 100%; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.uline:hover::after { transform: scaleX(1); }

/* color-as-a-ping (§ CIO 2026-07-04): categories share ONE neutral box; the
   distinguishing color moves to a small dot next to the name — never a filled
   or bordered colored box. */
.ping { display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  background: rgb(var(--ink-3)); flex: none; vertical-align: middle; }
.ping-pos    { background: rgb(var(--accent)); }
.ping-neg    { background: rgb(var(--neg)); }
.ping-warn   { background: rgb(var(--warn)); }
.ping-accent { background: rgb(var(--accent)); }

/* ═══════════════════════════════════════════════════════════════════════
   Light-rollout page treatment (DEC-2026-07-04-light-rollout) — the Atlas
   pilot's flat aesthetic generalised to any base.html page that opts into
   .theme-light (Zeus, flagship). Scoped to .theme-light so dark pages are
   untouched. Zero template markup needed for the flat + underline shift.
   ═══════════════════════════════════════════════════════════════════════ */

/* flat top-level sections: no heavy frame box — a hairline rule + whitespace */
.theme-light .card { background: transparent; border: 0;
  border-top: 1px solid rgb(var(--hairline)); border-radius: 0; padding: 1.25rem 0; }
/* dense stat/KPI grids keep a compact neutral tile so numbers stay legible */
.theme-light .grid > .card { border-top: 0; background: rgb(var(--surface-2));
  border-radius: 10px; padding: .7rem .9rem; }
/* a card nested inside a card never stacks a second rule */
.theme-light .card .card { border-top: 0; }

/* moving underline on every section title, on card hover — no markup edits */
.theme-light .t-title { position: relative; display: inline-block; }
.theme-light .t-title::after { content: ""; position: absolute; left: 0; bottom: -2px;
  height: 1px; width: 100%; background: currentColor; opacity: .45; transform: scaleX(0);
  transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.theme-light .card:hover .t-title::after { transform: scaleX(1); }

/* ── Zeus compatibility layer (DEC-2026-07-04-light-rollout) ──────────────
   Zeus predates the token system and paints with raw Tailwind dark utilities
   (bg-gray-950, text-white, …). Remap them to light tokens under .theme-light
   so Zeus reads the shared vocabulary without editing 2 300 lines of markup.
   Scoped to .theme-light; the flagship uses token classes so it is untouched.
   CSS-only — no data/allocation/logic change (esmtech/Zeus never collateral). */
.theme-light .bg-gray-950 { background-color: rgb(var(--canvas)); }
.theme-light .bg-gray-900, .theme-light .bg-gray-900\/95, .theme-light .bg-gray-900\/80,
.theme-light .bg-gray-900\/40 { background-color: rgb(var(--surface)); }
.theme-light .bg-gray-800, .theme-light .bg-gray-800\/80, .theme-light .bg-gray-800\/60,
.theme-light .bg-gray-800\/50, .theme-light .bg-gray-800\/30,
.theme-light .bg-gray-700, .theme-light .bg-gray-700\/80, .theme-light .bg-gray-700\/60,
.theme-light .bg-gray-700\/50 { background-color: rgb(var(--surface-2)); }
.theme-light .bg-gray-400 { background-color: rgb(var(--ink-3)); }
.theme-light .text-white, .theme-light .text-white\/90, .theme-light .text-white\/60,
.theme-light .text-gray-200 { color: rgb(var(--ink)); }
.theme-light .text-gray-300, .theme-light .text-gray-400 { color: rgb(var(--ink-2)); }
.theme-light [class*="border-gray-6"], .theme-light [class*="border-gray-7"],
.theme-light [class*="border-gray-8"] { border-color: rgb(var(--hairline)); }

/* low-contrast -400/-300 accent text (tuned for dark) → readable-on-white hues,
   preserving each agent/round identity colour */
.theme-light .text-emerald-400, .theme-light .text-emerald-500,
.theme-light .text-green-400, .theme-light .text-green-300 { color: #059669; }
.theme-light .text-red-400, .theme-light .text-red-300, .theme-light .text-red-200,
.theme-light .text-rose-400, .theme-light .text-rose-500, .theme-light .text-rose-300,
.theme-light .text-rose-300\/90 { color: #DC2626; }
.theme-light .text-amber-400, .theme-light .text-amber-300,
.theme-light .text-yellow-400, .theme-light .text-yellow-300 { color: #B45309; }
.theme-light .text-blue-400 { color: #2563EB; }
.theme-light .text-cyan-400, .theme-light .text-cyan-300, .theme-light .text-teal-400 { color: #0D9488; }
.theme-light .text-violet-400, .theme-light .text-violet-300 { color: #7C3AED; }
.theme-light .text-orange-400, .theme-light .text-orange-300 { color: #EA580C; }
.theme-light .text-pink-300 { color: #DB2777; }

/* colour-filled badges (bg-*-900/xx) → the same hue at a light tint on white */
.theme-light .bg-red-900\/95, .theme-light .bg-red-900\/60 { background-color: rgb(220 38 38 / .10); }
.theme-light .bg-amber-900\/60, .theme-light .bg-yellow-900\/60 { background-color: rgb(180 83 9 / .10); }
.theme-light .bg-emerald-900\/10, .theme-light .bg-green-900\/60 { background-color: rgb(5 150 105 / .10); }
.theme-light .bg-rose-900\/20, .theme-light .bg-pink-900\/60 { background-color: rgb(219 39 119 / .10); }
.theme-light .bg-violet-900\/60 { background-color: rgb(124 58 237 / .10); }
.theme-light .bg-orange-900\/60, .theme-light .bg-orange-900\/20 { background-color: rgb(234 88 12 / .10); }
.theme-light .bg-cyan-900\/60 { background-color: rgb(13 148 136 / .10); }
.theme-light .bg-blue-900\/20 { background-color: rgb(37 99 235 / .10); }
.theme-light [class*="border-red-7"], .theme-light [class*="border-rose-7"],
.theme-light [class*="border-pink-7"], .theme-light [class*="border-amber-7"],
.theme-light [class*="border-yellow-7"], .theme-light [class*="border-emerald-8"],
.theme-light [class*="border-green-7"], .theme-light [class*="border-blue-7"],
.theme-light [class*="border-cyan-7"], .theme-light [class*="border-violet-7"],
.theme-light [class*="border-orange-7"] { border-color: rgb(var(--hairline)); }

/* solid colour fills keep white text (buttons, region pills) */
.theme-light .bg-emerald-600, .theme-light .bg-emerald-500,
.theme-light .bg-violet-600 { color: #fff; }

/* QA hook: ?noanim freezes every animation/transition at its final state so
   headless screenshots are deterministic (templates/_menu.html sets the class). */
.noanim *, .noanim *::before, .noanim *::after {
  animation: none !important; transition: none !important;
}