/* Wizard UI basics. Requires tokens/tokens.css.
   Buttons, links, the "written by Wizard" signature, selection and alerts.
   Everything reads from the tokens, so light/dark switch automatically. */

/* ---------- Buttons ---------- */
.wz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--wizard-control-height); padding: 10px 16px; border: 0; border-radius: var(--wizard-radius-md);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--wizard-duration-fast) ease, box-shadow var(--wizard-duration-fast) ease;
}
.wz-btn:focus-visible { outline: 2px solid var(--wizard-focus); outline-offset: 2px; }
.wz-btn:disabled, .wz-btn[aria-disabled="true"] {
  background: var(--wizard-surface-hover); color: var(--wizard-text-subtle); box-shadow: none; cursor: not-allowed;
}

/* Magic: anything Wizard does. The only orange button. */
.wz-btn--magic { background: var(--wizard-magic); color: var(--wizard-on-magic); }
.wz-btn--magic:hover { background: var(--wizard-magic-hover); }
.wz-btn--magic:active { background: var(--wizard-magic-pressed); }

/* Primary: everyday main actions (Save, Create, Invite). Ink. */
.wz-btn--primary { background: var(--wizard-action); color: var(--wizard-on-action); }
.wz-btn--primary:hover { background: var(--wizard-action-hover); }

/* Secondary: outlined. */
.wz-btn--secondary { background: var(--wizard-bg); color: var(--wizard-text); box-shadow: inset 0 0 0 1px var(--wizard-border-strong); }
.wz-btn--secondary:hover { background: var(--wizard-surface-hover); }

/* Ghost: low-emphasis (Cancel). */
.wz-btn--ghost { background: transparent; color: var(--wizard-text); }
.wz-btn--ghost:hover { background: var(--wizard-surface-hover); }

/* Danger: destructive actions. */
.wz-btn--danger { background: var(--wizard-danger-solid); color: var(--wizard-on-danger); }
.wz-btn--danger:hover { background: var(--wizard-danger-hover); }

/* ---------- Wizard glyph inside the magic button ----------
   Resting: frame + core. While Wizard works (aria-busy="true"):
   a square peels off the frame, twists 35 degrees inward, then the core blooms back. */
.wz-glyph { width: 16px; height: 16px; flex-shrink: 0; }
.wz-glyph rect { fill: none; stroke: currentColor; }
.wz-glyph .frame { stroke-width: 10; }
.wz-glyph .l1 rect { stroke-width: 7.5; }
.wz-glyph .core { fill: #FFFFFF; }
.wz-glyph .l1 { opacity: 0; }
.wz-glyph .l1, .wz-glyph .core { transform-box: view-box; transform-origin: 50px 50px; }
[aria-busy="true"] .wz-glyph .l1, [aria-busy="true"] .wz-glyph .core {
  animation-duration: var(--wizard-spinner-duration, 1.8s); animation-iteration-count: infinite; animation-timing-function: linear;
}
[aria-busy="true"] .wz-glyph .l1 { animation-name: wz-glyph-peel; }
[aria-busy="true"] .wz-glyph .core { animation-name: wz-glyph-core; }
@keyframes wz-glyph-peel { 0%,12% { opacity: 0; transform: rotate(-35deg) scale(1.4195); animation-timing-function: cubic-bezier(.2,.7,.2,1); } 34%,84% { opacity: 1; transform: rotate(0deg) scale(1); } 94%,100% { opacity: 0; transform: rotate(0deg) scale(1); } }
@keyframes wz-glyph-core { 0% { opacity: 1; transform: scale(1); } 12%,36% { opacity: 0; transform: scale(.5); animation-timing-function: ease-out; } 56%,100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  [aria-busy="true"] .wz-glyph .l1, [aria-busy="true"] .wz-glyph .core { animation: none; }
}

/* ---------- Links: underlined text ---------- */
.wz-link, .wz-prose a {
  color: var(--wizard-link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--wizard-link-underline);
}
.wz-link:hover, .wz-prose a:hover { text-decoration-color: var(--wizard-link); }
.wz-link:focus-visible, .wz-prose a:focus-visible { outline: 2px solid var(--wizard-focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- "Written by Wizard" signature dot ---------- */
.wz-signature { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wizard-text-muted); }
.wz-signature::before, .wz-dot {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wizard-magic); flex-shrink: 0;
}
/* Words Wizard wrote inside a co-edited document */
.wz-trace {
  text-decoration: underline dotted var(--wizard-magic);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* ---------- Selection ----------
   You select: checkbox ticked + neutral background.
   Wizard points to something: faint orange background + dot, never ticked for you. */
.wz-row[aria-selected="true"], .wz-row.is-selected { background: var(--wizard-select); }
.wz-row[data-wizard="flagged"] { background: var(--wizard-magic-tint-strong); }
::selection { background: var(--wizard-select); color: var(--wizard-text); }
.wz-highlight { background: var(--wizard-magic-tint-strong); color: var(--wizard-text); }

/* ---------- Alerts ---------- */
.wz-alert { display: flex; gap: var(--wizard-space-3); align-items: flex-start; padding: var(--wizard-space-3) 14px; border-radius: var(--wizard-radius-lg); font-size: 14px; }
.wz-alert--success { background: var(--wizard-success-bg); color: var(--wizard-success-text); box-shadow: inset 0 0 0 1px var(--wizard-success-border); }
.wz-alert--warning { background: var(--wizard-warning-bg); color: var(--wizard-warning-text); box-shadow: inset 0 0 0 1px var(--wizard-warning-border); }
.wz-alert--danger  { background: var(--wizard-danger-bg);  color: var(--wizard-danger-text);  box-shadow: inset 0 0 0 1px var(--wizard-danger-border); }
.wz-alert--info    { background: var(--wizard-info-bg);    color: var(--wizard-info-text);    box-shadow: inset 0 0 0 1px var(--wizard-info-border); }

/* ---------- Icons ----------
   Everyday icons: Lucide (lucide.dev), sharpened to match the mark.
   Wizard's own features: the brand icons in icons/brand/.
   Put .wz-icon on any inline icon <svg>. Icons take the text color. */
.wz-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: square; stroke-linejoin: miter;
}
.wz-icon rect { rx: 0; ry: 0; }
.wz-icon--sm { width: 16px; height: 16px; }
.wz-icon--lg { width: 24px; height: 24px; }
/* The waiting-for-you core turns orange when Wizard needs the person */
.wz-icon .core { fill: currentColor; }
.wz-icon.is-waiting .core { fill: var(--wizard-magic); }

/* Badges: neutral by default, orange only when it's Wizard asking */
.wz-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box;
  border-radius: var(--wizard-radius-full); font-size: 12px; font-weight: 600;
  background: var(--wizard-surface-hover); color: var(--wizard-text);
}
.wz-badge--wizard { background: var(--wizard-magic); color: var(--wizard-on-magic); }