/* ============================================================
   TixMetric — "DEPTH" brand layer (rebrand 2026-10)
   Loaded AFTER redesign.css. Token redefinition + semantic
   re-mapping (accent/movement divorce) + nav/login identity.
   Spec: _overnight-tixmetric/design-rebrand.md
   ============================================================ */

/* --- Fonts (self-hosted, /fonts/) --------------------------------- */
@font-face { font-family:'Space Grotesk'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/plex-sans-600.woff2') format('woff2'); }

/* --- Tokens — "Depth" palette (§4.1) ------------------------------ */
:root {
  /* ground */
  --tm-bg:#060A0C; --tm-bg-2:#0A1013; --tm-surface:#0E1619;
  --tm-surface-2:#131C20; --tm-surface-3:#192428;
  --tm-border:rgba(140,190,205,0.10); --tm-border-2:rgba(140,190,205,0.17);
  --tm-divider:rgba(140,190,205,0.06);
  /* text */
  --tm-text:#EDF3F2; --tm-text-2:#B8C6C4; --tm-text-3:#7F938F; --tm-text-4:#566663;
  /* brand/action */
  --tm-accent:#2BD4E6; --tm-accent-strong:#5CE2F0;
  --tm-accent-soft:rgba(43,212,230,0.10); --tm-accent-ring:rgba(43,212,230,0.30);
  --tm-on-accent:#04181B;
  /* movement */
  --tm-up:#45D483; --tm-up-soft:rgba(69,212,131,0.10);
  --tm-down:#FF7088; --tm-down-soft:rgba(255,112,136,0.10);
  --tm-flat:var(--tm-text-4);
  /* health */
  --tm-health-ok:#45D483; --tm-health-warn:#F0B43C; --tm-health-bad:#FF5C6E;
  --tm-warn:#F0B43C; --tm-danger:#FF5C6E; --tm-info:#6FA8FF;
  /* data-viz */
  --tm-s1:#2BD4E6; --tm-s2:#9D8CFF; --tm-s3:#F2B63C; --tm-s4:#FF7088;
  --tm-s5:#45D483; --tm-s6:#6FA8FF;
  --tm-chart-grid:rgba(237,243,242,0.05); --tm-chart-tick:#7F938F;
  --tm-chart-area:rgba(111,168,255,0.16);
  /* geometry */
  --tm-radius-sm:5px; --tm-radius:8px; --tm-radius-lg:12px;
  --tm-shadow-sm:0 1px 2px rgba(0,0,0,0.35); --tm-shadow:0 4px 14px rgba(0,0,0,0.35);
  --tm-shadow-lg:0 18px 50px rgba(0,0,0,0.55);
  /* type */
  --tm-font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tm-font-display:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;
  --tm-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* legacy aliases still referenced by main.css + .badge rules */
  --accent:#2BD4E6; --accent-soft:rgba(43,212,230,0.14);
  --tm-text-muted:#7F938F;
}
::selection { background:rgba(43,212,230,0.25); }
* { scrollbar-width:thin; scrollbar-color:#192428 transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#192428; border:3px solid transparent;
  background-clip:padding-box; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#243338; background-clip:padding-box; }

/* --- Typography roles (§2.3) --------------------------------------- */
.num, .data-table td.num, .dash-kpi-value, .mk-delta, .tm-dte {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";   /* belt + braces for Plex */
}
.page-header h1, .ed-title, .view-title, .dash-kpi-value, .auth-h1, .tm-brand-word {
  font-family: var(--tm-font-display);
}
b, strong { font-weight: 600; }

/* --- Semantic re-mapping — the accent/movement divorce (§5.1) ------ */
/* movement chips: green/red, never cyan */
.mk-delta-up   { color:var(--tm-up);   background:var(--tm-up-soft); }
.mk-delta-down { color:var(--tm-down); background:var(--tm-down-soft); }
.delta-pos { color:var(--tm-up); }
.delta-neg { color:var(--tm-down); }
.stat-up   { color:var(--tm-up); }
.stat-down { color:var(--tm-down); }
/* health: green dot/pill, never cyan */
.status-ok { background:var(--tm-health-ok); box-shadow:0 0 0 3px var(--tm-up-soft); }
.rate-ok   { background:var(--tm-up-soft); color:var(--tm-up); border-color:rgba(69,212,131,0.25); }
.badge { border-color:rgba(69,212,131,0.6); background:var(--tm-up-soft); color:var(--tm-up); }
.badge.success { border-color:rgba(69,212,131,0.6); background:var(--tm-up-soft); color:var(--tm-up); }
.role-analyst  { background:var(--tm-up-soft); color:var(--tm-up); border-color:rgba(69,212,131,0.25); }
.dash-kpi-ok .dash-kpi-icon { background:var(--tm-up-soft); color:var(--tm-health-ok); }
.mp-pill.mp-mapped { background:var(--tm-up-soft); color:var(--tm-up); border-color:rgba(69,212,131,0.25); }
/* cc toggles = positive/enabled state → mint (per §4.2 semantics column) */
.cc-pill.on   { background:var(--tm-up-soft); border-color:rgba(69,212,131,0.45); color:var(--tm-up); }
.cc-master.on { background:var(--tm-up); border-color:var(--tm-up); }
/* identity gradients: cyan depth, replacing green */
.logo-icon, .user-avatar {
  background:linear-gradient(135deg,#5CE2F0 0%,#1CA8BD 60%,#0B3F49 100%);
  color:var(--tm-on-accent);
  box-shadow:0 0 0 1px rgba(43,212,230,0.35), 0 6px 16px rgba(43,212,230,0.18);
}

/* --- Wordmark (§3) -------------------------------------------------- */
.tm-brand { display:flex; align-items:center; gap:10px; padding:0 10px; height:56px;
  text-decoration:none; border-bottom:1px solid var(--tm-divider); margin:-14px -10px 8px; }
.tm-brand-word { font:700 18px/1 var(--tm-font-display); letter-spacing:-0.01em; color:var(--tm-text); }
.tm-brand-word em { font-style:normal; color:var(--tm-accent); }
.tm-brand-mark { flex-shrink:0; display:block; }

/* --- Sidebar nav (§5.2) --------------------------------------------- */
.sidebar { background:var(--tm-bg-2); border-right:1px solid var(--tm-border); }
.nav-label { font:600 10.5px/1 var(--tm-font); text-transform:uppercase;
  letter-spacing:.09em; color:var(--tm-text-4); margin:12px 10px 6px; }
.sidebar-nav a { color:var(--tm-text-3); font-weight:500; }
.sidebar-nav a .icon { color:var(--tm-text-4); }              /* icons quieter than labels */
.sidebar-nav a:hover { background:var(--tm-surface); color:var(--tm-text); }
.sidebar-nav a:hover .icon { color:var(--tm-text-2); }
.sidebar-nav a.active { background:var(--tm-accent-soft); color:var(--tm-text); } /* white text… */
.sidebar-nav a.active .icon { color:var(--tm-accent); }        /* …cyan icon = the signal */
.sidebar-nav a.active::before { width:2px; background:var(--tm-accent); }

/* --- Topbar (§5.3) --------------------------------------------------- */
.topbar { background:rgba(6,10,12,0.85); backdrop-filter:blur(8px); }
.topbar-alerts-badge { background:var(--tm-danger); color:#fff; }

/* --- Buttons (§5.4) --------------------------------------------------- */
.btn-primary { background:var(--tm-accent); color:var(--tm-on-accent);
  box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.12); }
.btn-primary:hover { background:var(--tm-accent-strong); }

/* --- Dense tables (§5.5) ---------------------------------------------- */
.data-table thead th { background:var(--tm-bg-2); }
.data-table tbody tr:hover { background:var(--tm-surface-2); }
.data-table td.num, .mk-table .num { font-variant-numeric:tabular-nums; }

/* --- Modals (§5.7) ----------------------------------------------------- */
.tm-modal-card { border-color:var(--tm-border-2);
  box-shadow:var(--tm-shadow-lg), inset 0 1px 0 rgba(237,243,242,0.04); } /* top hairline */

/* --- Login — the showpiece (§6, bold revision 2026-10) ----------------- */
.auth-body { background:var(--tm-bg); overflow:hidden; }   /* canvas provides the atmosphere */
#tmDepth { position:fixed; inset:0; z-index:0; }
/* subtle vignette over the canvas so the glass card has a darker bed to read against */
.auth-body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 48%, rgba(6,10,12,0.55), transparent 70%); }
.auth-card { position:relative; z-index:1; gap:22px; }
.auth-brand-lg { display:flex; align-items:center; gap:14px; text-decoration:none; }
.auth-brand-lg .tm-brand-word { font:700 30px/1 var(--tm-font-display); letter-spacing:-0.01em; }

/* Glass card — frosted petrol over the depth field, hairline tinted border,
   slow cyan edge-glow pulse. Text bed kept opaque enough for AA (0.82 petrol
   + blur; §1.6 contrast ratios computed against --tm-surface still hold). */
.auth-form-wrap {
  position:relative;
  width:min(392px,100%);
  background:linear-gradient(160deg, rgba(19,28,32,0.86), rgba(10,16,19,0.9));
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--tm-border-2);
  border-radius:var(--tm-radius-lg);
  box-shadow:var(--tm-shadow-lg), inset 0 1px 0 rgba(237,243,242,0.05);
  padding:30px 28px 26px; display:flex; flex-direction:column; gap:18px;
  isolation:isolate;
}
/* animated cyan edge-glow — a blurred outline that breathes slowly */
.auth-form-wrap::before {
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg, rgba(43,212,230,0.55), rgba(43,212,230,0.05) 40%,
            rgba(43,212,230,0.05) 60%, rgba(43,212,230,0.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:tm-edge 6s ease-in-out infinite;
}
.auth-form-wrap::after {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  box-shadow:0 0 30px rgba(43,212,230,0.12);
  animation:tm-edge 6s ease-in-out infinite;
}
@keyframes tm-edge { 0%,100%{opacity:.55} 50%{opacity:1} }

.auth-eyebrow { font:600 11px/1 var(--tm-font); text-transform:uppercase;
  letter-spacing:.08em; color:var(--tm-accent); margin:0; }
.auth-h1 { font:700 24px/1.1 var(--tm-font-display); color:var(--tm-text);
  margin:0; text-align:left; }


.auth-sso-btn { display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:46px; padding:0 16px;
  border-radius:var(--tm-radius-sm); text-decoration:none;
  font:600 14px/1 var(--tm-font); cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.12),
             0 0 0 0 var(--tm-accent-ring);
  transition:box-shadow .18s ease, background .18s ease, transform .12s ease; }
.auth-sso-btn:hover { box-shadow:0 1px 0 rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.12),
             0 0 0 4px var(--tm-accent-ring); }
.auth-sso-btn:active { transform:translateY(1px); }
.auth-sso-btn .arr { margin-left:auto; transition:transform .18s ease; }
.auth-sso-btn:hover .arr { transform:translateX(3px); }
.auth-footnote { font-size:12px; color:var(--tm-text-3); text-align:center; margin:0; }
.auth-legacy-link { display:block; text-align:center; font-size:12px;
  color:var(--tm-text-3); background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; padding:0; margin:0 auto; }
.auth-legacy-link:hover { color:var(--tm-text-2); }
.auth-form[hidden] { display:none; }
.auth-foot { position:relative; z-index:1; }

/* ---- Load reveal cascade (wordmark → card → children) ----------------- */
.tm-reveal { opacity:0; transform:translateY(10px); animation:tm-rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
.auth-brand-lg.tm-reveal { animation-delay:.05s; }
.auth-form-wrap.tm-reveal { animation-delay:.18s; }
.auth-form-wrap .tm-reveal { animation-delay:.32s; }
.auth-form-wrap .tm-reveal.d2 { animation-delay:.40s; }
.auth-form-wrap .tm-reveal.d3 { animation-delay:.48s; }
.auth-form-wrap .tm-reveal.d4 { animation-delay:.56s; }
.auth-foot.tm-reveal { animation-delay:.6s; }
@keyframes tm-rise { to { opacity:1; transform:none; } }
/* wordmark depth-bars rise to height on load */
.auth-brand-lg .tm-brand-mark rect:nth-of-type(2),
.auth-brand-lg .tm-brand-mark rect:nth-of-type(3),
.auth-brand-lg .tm-brand-mark rect:nth-of-type(4) {
  transform-box:fill-box; transform-origin:bottom; transform:scaleY(0);
  animation:tm-bar .5s cubic-bezier(.2,.8,.2,1) forwards; }
.auth-brand-lg .tm-brand-mark rect:nth-of-type(2) { animation-delay:.18s; }
.auth-brand-lg .tm-brand-mark rect:nth-of-type(3) { animation-delay:.28s; }
.auth-brand-lg .tm-brand-mark rect:nth-of-type(4) { animation-delay:.38s; }
@keyframes tm-bar { to { transform:scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .auth-form-wrap::before, .auth-form-wrap::after { animation:none; opacity:.7; }
  .tm-reveal { opacity:1; transform:none; animation:none; }
  .auth-brand-lg .tm-brand-mark rect { transform:none !important; animation:none !important; }
}

/* On-sales widget — primary ticketing-source brand chip (dashboard.js sourceChip) */
.os-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.os-src { display:inline-flex; align-items:center; gap:5px; }
.os-src-mark { display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:4px;
  font:700 9px/1 var(--tm-font); letter-spacing:.01em; }
.os-src-name { font-size:11px; color:var(--tm-text-3); }