/* ============================================================================
   KG MAX — design-bible shared layer.  Loaded right after tokens.css in every
   shell (dashboard, max, auth, admin, scan).  Brand primitives shared across all
   domains: the live-CSS MAX mark (ported 1:1 from design-bible/MAX Logo - Michroma
   .html — replaces every KG logo), the ring-motion spinner (the new loading icon +
   Max "thinking" bubble), and bible utilities. Energy Red routes through
   --user-accent so the operator accent picker still applies. Respects
   prefers-reduced-motion.
   ============================================================================ */

/* ---------------------------------------------------------------- THE MAX MARK
   CANON (design-bible/MAX Logo - Michroma.html): a thin ring = silver band +
   energy-red arc (peak 45°, 150° spread, feathering both ways) + a feathered
   shadow arc opposite, built with border + mask-composite:exclude.  The lockup
   threads the "max" wordmark (Michroma; "ma" silver, "x" red) THROUGH the ring.

   Markup — symbol (ring only):
     <span class="max-mark" style="--d:40px"><i class="mk-band"></i>
       <i class="mk-energy"></i><i class="mk-shadow"></i></span>
   Markup — lockup (word through ring):
     <span class="max-lockup" style="--d:120px">
       <span class="max-mark max-mark--fade"><i class="mk-band"></i>
         <i class="mk-energy"></i><i class="mk-shadow"></i></span>
       <span class="mk-word"><span class="ma">ma</span><span class="x">x</span></span></span>
   Size: set --d (ring diameter); --sw (stroke) + --wf (word size) derive from it. */
.max-mark {
  --d: 40px;
  --sw: max(1.3px, calc(var(--d) * 0.018));   /* canon stroke ~1.8% of diameter; 1.3px floor keeps the ring visible at tiny (header/spinner) sizes */
  --energy: var(--user-accent, #ff381f);
  --mk-bg: var(--bg, #09090a);     /* surface the shadow melts the ring into */
  --hot: 45deg; --spread: 75deg;
  --shadow-hot: 225deg; --shadow-spread: 90deg;
  position: relative;
  width: var(--d); height: var(--d);
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
}
.max-mark > i {
  position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
  border: var(--sw) solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Mark tones: graphite/steel is the LIGHT default (reads on white cards + light
   headers); dark/MAX — and the forced .--silver modifier, for dark overlays like
   the splash — restore the bright silver band. Mirrors tokens.css light/dark/auto. */
.max-mark .mk-band {
  background: linear-gradient(155deg, #5c5f67, #34373d 40%, #60636b 70%, #232529) border-box;
}
:root[data-theme="dark"] .max-mark .mk-band,
:root[data-theme="max"] .max-mark .mk-band,
.max-mark--silver .mk-band,
.max-lockup--silver .mk-band {
  background: linear-gradient(155deg, #f4f4f5, #c6c7ca 42%, #84858a 74%, #5f6064) border-box;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .max-mark .mk-band {
    background: linear-gradient(155deg, #f4f4f5, #c6c7ca 42%, #84858a 74%, #5f6064) border-box;
  }
}
.max-mark .mk-energy {
  background: conic-gradient(from calc(var(--hot) - 180deg),
    color-mix(in srgb, var(--energy), transparent 100%) calc(180deg - var(--spread)),
    color-mix(in srgb, var(--energy), transparent 82%)  calc(180deg - var(--spread) * 0.80),
    color-mix(in srgb, var(--energy), transparent 52%)  calc(180deg - var(--spread) * 0.58),
    color-mix(in srgb, var(--energy), transparent 22%)  calc(180deg - var(--spread) * 0.36),
    var(--energy)                                        calc(180deg - var(--spread) * 0.16),
    color-mix(in srgb, var(--energy) 60%, white)        180deg,
    var(--energy)                                        calc(180deg + var(--spread) * 0.16),
    color-mix(in srgb, var(--energy), transparent 22%)  calc(180deg + var(--spread) * 0.36),
    color-mix(in srgb, var(--energy), transparent 52%)  calc(180deg + var(--spread) * 0.58),
    color-mix(in srgb, var(--energy), transparent 82%)  calc(180deg + var(--spread) * 0.80),
    color-mix(in srgb, var(--energy), transparent 100%) calc(180deg + var(--spread)),
    color-mix(in srgb, var(--energy), transparent 100%) 360deg) border-box;
}
.max-mark .mk-shadow {
  background: conic-gradient(from calc(var(--shadow-hot) - 180deg),
    transparent calc(180deg - var(--shadow-spread)),
    color-mix(in srgb, var(--mk-bg), transparent 88%) calc(180deg - var(--shadow-spread) * 0.82),
    color-mix(in srgb, var(--mk-bg), transparent 68%) calc(180deg - var(--shadow-spread) * 0.62),
    color-mix(in srgb, var(--mk-bg), transparent 40%) calc(180deg - var(--shadow-spread) * 0.40),
    color-mix(in srgb, var(--mk-bg), transparent 16%) calc(180deg - var(--shadow-spread) * 0.20),
    var(--mk-bg) 180deg,
    color-mix(in srgb, var(--mk-bg), transparent 16%) calc(180deg + var(--shadow-spread) * 0.20),
    color-mix(in srgb, var(--mk-bg), transparent 40%) calc(180deg + var(--shadow-spread) * 0.40),
    color-mix(in srgb, var(--mk-bg), transparent 68%) calc(180deg + var(--shadow-spread) * 0.62),
    color-mix(in srgb, var(--mk-bg), transparent 88%) calc(180deg + var(--shadow-spread) * 0.82),
    transparent calc(180deg + var(--shadow-spread)),
    transparent 360deg) border-box;
}
/* horizontal gap where the wordmark crosses the ring (lockup only) */
.max-mark--fade {
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 30%, transparent 35%, transparent 65%, #000 70%, #000 100%);
          mask: linear-gradient(to bottom, #000 0, #000 30%, transparent 35%, transparent 65%, #000 70%, #000 100%);
}
.max-mark.is-glow { filter: drop-shadow(0 0 calc(var(--d) * 0.18) color-mix(in srgb, var(--user-accent, #ff381f) 42%, transparent)); }

/* hero lockup — wordmark threaded through the ring */
.max-lockup {
  --d: 120px;
  --wf: calc(var(--d) * 0.40);
  position: relative;
  display: inline-block;
  line-height: 1;
}
.max-lockup > .max-mark { --d: inherit; }
.max-lockup .mk-word {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% - var(--d) * 0.084));   /* center x-height band on the ring axis (canon optical nudge) */
  font-family: var(--font-wordmark, "Michroma", var(--font-display));
  font-weight: 400;
  font-size: var(--wf);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em;
  user-select: none;
}
.max-lockup .ma {
  background: linear-gradient(180deg, #3a3e46 0%, #1a1f26 62%, #0e1116 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:root[data-theme="dark"] .max-lockup .ma,
:root[data-theme="max"] .max-lockup .ma,
.max-lockup--silver .ma {
  background: linear-gradient(180deg, #ffffff 0%, #ededef 26%, #bcbdc1 64%, #898a8e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .max-lockup .ma {
    background: linear-gradient(180deg, #ffffff 0%, #ededef 26%, #bcbdc1 64%, #898a8e 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
.max-lockup .x {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--user-accent, #ff381f) 62%, white) 0%,
    var(--user-accent, #ff381f) 58%,
    color-mix(in srgb, var(--user-accent, #ff381f) 82%, black) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------- RING-MOTION
   The loading icon + Max "thinking" = the MAX ring with the energy arc orbiting. */
@keyframes max-ring-spin { to { transform: rotate(360deg); } }
.max-spinner .mk-energy { animation: max-ring-spin 1.3s linear infinite; transform-origin: 50% 50%; }
.max-spinner .mk-shadow { display: none; }   /* a clean chase, no fixed melt while spinning */

.max-thinking {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.max-thinking .max-mark { --d: 18px; --mk-bg: transparent; }
.max-thinking .mt-label::after { content: ""; animation: max-think-dots 1.4s steps(1, end) infinite; }
@keyframes max-think-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* Max chat in-flight "thinking" — the MAX ring spinning beside the rotating status line */
.chat-stream-status { display: inline-flex; align-items: center; gap: 9px; }
.chat-stream-status .chat-stream-ring { --d: 17px; flex: 0 0 auto; }

/* ----------------------------------------------------------- LOGO POWER-ON
   Hover/focus the brand mark (host carries .max-poweron) → the energy arc spools
   up two turns (turbine-style ease-out) and the whole ring blooms red. */
@keyframes max-ring-poweron { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes max-logo-bloom {
  0%   { filter: drop-shadow(0 0 4px  color-mix(in srgb, var(--user-accent, #ff381f) 18%, transparent)); }
  42%  { filter: drop-shadow(0 0 17px color-mix(in srgb, var(--user-accent, #ff381f) 82%, transparent)) saturate(1.22) brightness(1.13); }
  100% { filter: drop-shadow(0 0 8px  color-mix(in srgb, var(--user-accent, #ff381f) 42%, transparent)); }
}
.max-poweron { cursor: pointer; }
.max-poweron:hover .mk-energy,
.max-poweron:focus-visible .mk-energy {
  animation: max-ring-poweron 1s cubic-bezier(.16, .74, .18, 1);
  transform-origin: 50% 50%;
}
.max-poweron:hover .max-lockup,
.max-poweron:hover > .max-mark,
.max-poweron:focus-visible .max-lockup,
.max-poweron:focus-visible > .max-mark { animation: max-logo-bloom 1s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .max-poweron:hover .mk-energy, .max-poweron:focus-visible .mk-energy { animation: none; }
  .max-poweron:hover .max-lockup, .max-poweron:focus-visible .max-lockup,
  .max-poweron:hover > .max-mark, .max-poweron:focus-visible > .max-mark {
    animation: none;
    filter: drop-shadow(0 0 11px color-mix(in srgb, var(--user-accent, #ff381f) 55%, transparent));
  }
}

/* -------------------------------------------------------------- UTILITIES
   Bible eyebrow: UPPERCASE, wide-tracked, mono — the section/label voice. */
.kg-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs, 10.5px);
  font-weight: var(--fw-semi, 600);
  letter-spacing: var(--tracking-eyebrow, 0.2em);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .max-spinner .mk-energy { animation-duration: 3.2s; }
  .max-thinking .mt-label::after { animation: none; content: "…"; }
}

/* ---------------------------------------------------------------- FEEDBACK
   Bible feedback primitives (design-bible/components/feedback). Mapped onto the
   dashboard's LOCKED tokens (--green/--warn/--red/--accent/--brand) via the same
   color-mix tint pattern as .crm-inv — store/type/state semantics are reused,
   never re-colored. The labeled spinner is the existing .max-thinking (ring +
   mono "Thinking…"); Badge + ProgressBar are added here. */
.kgf-badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: 0.02em; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.kgf-badge .kgf-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.kgf-badge--success  { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.kgf-badge--warning  { color: var(--warn);  background: color-mix(in srgb, var(--warn) 15%, transparent); }
.kgf-badge--critical { color: var(--red);   background: color-mix(in srgb, var(--red) 13%, transparent); }
.kgf-badge--info     { color: var(--text-dim); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.kgf-badge--neutral  { color: var(--text-dim); background: color-mix(in srgb, var(--text-muted) 10%, transparent); border-color: var(--border); }
.kgf-badge--accent   { font-family: var(--font-display); font-weight: 600; color: #fff; background: var(--brand); box-shadow: var(--glow-red-sm); }
.kgf-badge--critical .kgf-badge-dot { box-shadow: 0 0 6px color-mix(in srgb, var(--red) 70%, transparent); }

/* ProgressBar — deterministic (set inline width on .kgf-progress-fill) or
   .is-indeterminate ("converging inputs": the 38% bar sweeps left→right). */
.kgf-progress { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); }
.kgf-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kgf-progress-label { font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.kgf-progress-val { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.kgf-progress-track {
  position: relative; height: 8px; border-radius: var(--r-pill);
  background: var(--bg-sunken); border: 1px solid var(--border-subtle, var(--border)); overflow: hidden;
}
.kgf-progress-track.is-lg { height: 12px; }
.kgf-progress-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill);
  background: var(--gradient-energy); box-shadow: var(--glow-red-sm);
  transition: width var(--dur-slow) var(--ease-out);
}
.kgf-progress.is-indeterminate .kgf-progress-fill { width: 38%; animation: kgf-prog-slide 1.25s var(--ease-standard) infinite; }
@keyframes kgf-prog-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .kgf-progress.is-indeterminate .kgf-progress-fill { animation-duration: 2.8s; }
}