/* Marcus OS — shared platform UI layer (ADR-143). Consumes --mc-* tokens.
   Universal hover tooltips: add data-tip="..." to ANY element.
   LAW (consistent pattern): tooltips always appear BELOW the element.
   - data-tip-end → right-aligned (for corner buttons near the right edge; never clips).
   - timing: SLOW fade-in (.28s) on hover, FAST fade-out (.12s) on leave.
   Pair with aria-label for accessibility. */

[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);            /* always BELOW */
  transform: translateX(-50%) translateY(-4px);
  background: var(--mc-surface);
  color: var(--mc-ink);
  border: 1px solid var(--mc-rim2);
  box-shadow: var(--mc-shadow);
  padding: 5px 10px;
  border-radius: 8px;
  font: 500 11.5px/1.3 'Inter', -apple-system, system-ui, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease-out, transform .14s ease-out;   /* leave = fast */
  z-index: 8050;
}
/* right-aligned variant — corner buttons near the right edge stay on-screen */
[data-tip][data-tip-end]::after { left: auto; right: 0; transform: translateY(-4px); }

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);   /* enter = slow + smooth */
}
[data-tip][data-tip-end]:hover::after,
[data-tip][data-tip-end]:focus-visible::after { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-tip]::after, [data-tip]:hover::after { transition: opacity .1s ease; }
}

/* Slow-motion theme crossfade — theme-toggle.js adds .mc-theming during the switch
   (~1.1s) then removes it, so the transition never interferes with hover/other anims.
   Fades all solid colors (surfaces, text, borders, shadows, icons) light<->dark. */
html.mc-theming, html.mc-theming *, html.mc-theming *::before, html.mc-theming *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, fill .5s ease, stroke .5s ease !important;
}

/* Universal theme toggle button (shared — used on every page) */
.mc-theme-toggle{position:fixed;top:14px;right:16px;z-index:8000;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--mc-surface);border:1px solid var(--mc-rim2);color:var(--mc-accent);cursor:pointer;box-shadow:var(--mc-shadow)}
.mc-theme-toggle:hover{background:var(--mc-surface-2);color:var(--mc-accent-2)}
.mc-theme-toggle svg{width:16px;height:16px;display:block}