/* ============================================================================
   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(2px, calc(var(--d) * 0.06));
  --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;
}
.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 41%, transparent 59%, #000 70%, #000 100%);
          mask: linear-gradient(to bottom, #000 0, #000 30%, transparent 41%, transparent 59%, #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.064));   /* center x-height band on the ring axis */
  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, #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: "…"; }
}