/* Deputary brand styling — single source of truth for the logo lockup.
   Markup comes from app/templates/_macros/brand.html (mark() / logo()).
   Colours reference the per-document :root tokens:
     --ink   the mark (nodes + links), on light backgrounds
     --spark orange orchestrator hub
   Any document that renders the brand must define those tokens + link this. */

/* —— Lockup wrappers ——————————————————————————————————————————————— */

/* App sidebar lockup (icon tile + wordmark), also reused on auth pages. */
.brand-link {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; margin: 0 0 14px;
  cursor: pointer; position: relative; text-decoration: none;
}

/* No tile — the mark sits free next to the wordmark; a subtle lift on hover. */
.brand-link:hover .brand-mark { transform: translateY(-1px); }

.brand-wordmark {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink);
  text-transform: uppercase;
}

.brand-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--line);
}

/* —— The mark itself ——————————————————————————————————————————————
   "Delegation network": an orange orchestrator node (the spark) delegating
   along links out to agent nodes. No tile — nodes/links inherit currentColor
   (ink on light backgrounds); single colour — the larger hub still reads as
   the orchestrator node. Crisp from 16px up. */
.brand-mark { display: block; color: var(--ink); transition: transform 0.15s ease; }
.brand-mark .agent-link { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.brand-mark .agent-node { fill: currentColor; }
.brand-mark .spark { fill: currentColor; }

/* The orchestrator node pulses on hover / active — the agent "thinking". */
.brand-link:hover .brand-mark .spark,
.brand-link.on    .brand-mark .spark,
.brand:hover      .brand-mark .spark {
  animation: spark-pulse 1.6s ease-in-out infinite;
}
@keyframes spark-pulse {
  0%, 100% { transform-origin: 6.5px 11px; transform: scale(1); }
  50%      { transform-origin: 6.5px 11px; transform: scale(1.18); }
}