/* mfa-ui.css — the shared UI foundation for all four pages (index / App /
   Logs / Config). The dc pages style largely inline; this layer owns what
   inline styles can't: design tokens (custom properties), global focus/
   selection/scrollbar/disabled polish, reduced-motion, and shell classes for
   the standardized top nav. One product shell, not four canvases. */

:root {
  /* ink & paper */
  --mfa-ink: #2B2559;
  --mfa-ink-deep: #221E45;
  --mfa-paper: #FAF3E4;
  --mfa-card: #FFFFFF;
  --mfa-cream: #FFF6E3;
  --mfa-sand: #EFE6D2;
  --mfa-line: #EDE3C8;
  /* dark (Logs / YAML) surfaces */
  --mfa-night: #16132E;
  --mfa-night-card: #221E45;
  --mfa-night-line: #2E2955;
  --mfa-night-edge: #0F0D24;
  --mfa-night-border: #3A3466;
  /* brand accents — one clear accent per surface */
  --mfa-violet: #9B7BFF;
  --mfa-coral: #FF7A59;
  --mfa-blue: #47B5FF;
  --mfa-green: #58C956;
  --mfa-yellow: #FFC94D;
  /* muted text */
  --mfa-muted: #8C84B8;
  --mfa-muted-2: #5A5386;
  --mfa-night-muted: #B8B1E8;
  /* geometry — calmer than the raw canvases: 8–12px radii, small shadow drops */
  --mfa-radius-s: 8px;
  --mfa-radius: 12px;
  --mfa-radius-l: 16px;
  --mfa-border: 2.5px solid var(--mfa-ink);
  --mfa-shadow: 0 3px 0 var(--mfa-ink);
  --mfa-shadow-s: 0 2px 0 var(--mfa-ink);
  /* type */
  --mfa-font-display: 'Baloo 2', sans-serif;
  --mfa-font-body: 'Nunito', sans-serif;
  --mfa-font-mono: 'JetBrains Mono', monospace;
  /* spacing rhythm */
  --mfa-gap-s: 8px;
  --mfa-gap: 12px;
  --mfa-gap-l: 20px;
}

/* ---- global polish (works under inline styles) ---- */

/* keyboard focus: one visible ring everywhere, never removed silently */
:focus-visible {
  outline: 3px solid var(--mfa-violet);
  outline-offset: 2px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--mfa-violet); color: #fff; }

/* disabled affordance — inline styles rarely set it */
button:disabled, [aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* stable scrollbars on both light and dark surfaces */
* { scrollbar-width: thin; scrollbar-color: var(--mfa-muted) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--mfa-muted); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* text must never burst a pill/button/card */
.mfa-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* live pulse — subtle, and nonessential by design */
@keyframes mfaPulse {
  0% { box-shadow: 0 0 0 0 rgba(88, 201, 86, .5); }
  70% { box-shadow: 0 0 0 7px rgba(88, 201, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(88, 201, 86, 0); }
}
.mfa-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mfa-green); animation: mfaPulse 1.6s ease-out infinite; }

/* the whole shell respects reduced motion: pulses freeze, transitions drop */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- shared shell pieces (used by new/standardized markup) ---- */

/* top-shell nav pill group: Builder · Logs · YAML (dark header variant) */
.mfa-navgroup { display: flex; background: var(--mfa-night-line); border: 2.5px solid var(--mfa-night-edge); border-radius: var(--mfa-radius); box-shadow: 0 3px 0 var(--mfa-night-edge); overflow: hidden; flex: none; }
.mfa-navgroup a { padding: 8px 13px; font: 800 12.5px var(--mfa-font-display); color: var(--mfa-night-muted); text-decoration: none; white-space: nowrap; }
.mfa-navgroup a.active { background: var(--mfa-violet); color: #fff; }

/* account chip (links to the account page at ./) */
.mfa-account-chip { display: flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; background: #fff; border: 2.5px solid var(--mfa-night-edge); border-radius: 999px; box-shadow: 0 3px 0 var(--mfa-night-edge); text-decoration: none; flex: none; max-width: 190px; }
.mfa-account-chip .name { font: 800 12.5px var(--mfa-font-display); color: var(--mfa-ink-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mobile: the shells wrap instead of overflowing; page grids stack.
   !important is deliberate — dc pages set grid-template-columns inline, and
   stacking on small screens must win. */
@media (max-width: 760px) {
  .mfa-shell-bar { flex-wrap: wrap; row-gap: 8px; }
  .mfa-stack-mobile { grid-template-columns: 1fr !important; }
}