/* MasterCraft studio chrome: slim app bar + toasts for root-level studios.
   Tokens mirror css/site.css :root; namespaced --mc-* so app styles never collide. */
:root {
  --mc-ink: #0a1d37;
  --mc-paper: #ffffff;
  --mc-surface: #eef1f5;
  --mc-line: #e4e8ee;
  --mc-muted: #5c6b7f;
  --mc-blue: #0f69f0;
  --mc-blue-deep: #0b54c4;
  --mc-red: #d90429;
  --mc-h: 44px;
  --mc-r: 10px;
  --mc-ease: 180ms ease;
}

.mc-chrome {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--mc-h);
  flex: none;
  padding: 0 12px;
  background: var(--mc-paper);
  border-bottom: 1px solid var(--mc-line);
  font: 600 0.84rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--mc-ink);
}

.mc-chrome-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-left: -6px;
  border-radius: var(--mc-r);
  color: var(--mc-blue);
  text-decoration: none;
  transition: background var(--mc-ease), color var(--mc-ease);
}
.mc-chrome-back:hover { background: var(--mc-surface); color: var(--mc-blue-deep); }
.mc-chrome-back:focus-visible {
  outline: 2px solid var(--mc-blue);
  outline-offset: 2px;
}

.mc-chrome-name { color: var(--mc-ink); white-space: nowrap; }

.mc-chrome-status {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--mc-muted);
}

/* Toasts (window.MCStudio.toast) */
.mc-toast-zone {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-toast {
  max-width: 320px;
  padding: 10px 14px;
  border-radius: var(--mc-r);
  background: var(--mc-ink);
  color: var(--mc-paper);
  font: 500 0.84rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 14px -2px rgba(10, 29, 55, 0.3);
}
.mc-toast-error { background: var(--mc-red); }

@media (prefers-reduced-motion: reduce) {
  .mc-chrome *, .mc-chrome *::before, .mc-chrome *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}