/*
 * C3X0 Experience Mode — global CSS conventions.
 *
 * Applied via html[data-experience-mode] which is set by the early inline
 * script in header.php before any other content renders (no FOUC).
 *
 * Existing page-specific CSS (mm-expert-only, ham-expert-only, etc.) is
 * NOT touched. This file adds the sitewide layer on top.
 */

/* ── Attribute-based content gating ────────────────────────────────────── */

/* data-beginner-only  — visible only in beginner mode */
html[data-experience-mode="expert"] [data-beginner-only] {
  display: none !important;
}

/* data-expert-only  — visible only in expert mode */
html[data-experience-mode="beginner"] [data-expert-only] {
  display: none !important;
}

/* data-mode shorthand */
html[data-experience-mode="expert"]   [data-mode="beginner"] { display: none !important; }
html[data-experience-mode="beginner"] [data-mode="expert"]   { display: none !important; }

/* Shared generic classes for pages not yet migrated to attributes */
html[data-experience-mode="expert"]   .global-beginner-only { display: none !important; }
html[data-experience-mode="beginner"] .global-expert-only   { display: none !important; }

/* ── Hide page-local mode toggles (global toggle owns this now) ─────────── */
/*
 * The early inline script always sets data-experience-mode, so these selectors
 * are active from first paint. Page-specific toggles become invisible while
 * their JS logic (applyMode, etc.) continues to work behind the scenes,
 * driven by the global event system.
 */
html[data-experience-mode] .mm-mode-btn,
html[data-experience-mode] .ham-mode-btn,
html[data-experience-mode] .dso-mode-btn,
html[data-experience-mode] .moon-mode-toggle,
html[data-experience-mode] #sp-mode-toggle {
  display: none !important;
}

/* ── Experience Mode toggle in config panel ─────────────────────────────── */
.nav-exp-mode-icon {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 200, 255, 0.3);
  color: rgba(0, 200, 255, 0.8);
}

/* State label changes color based on current mode */
html[data-experience-mode="expert"] #exp-mode-toggle .nav-cfg-toggle-state {
  color: #a78bfa; /* purple-ish for expert */
}
html[data-experience-mode="beginner"] #exp-mode-toggle .nav-cfg-toggle-state {
  color: var(--teal, #00c8ff);
}

/* ── Tooltip system ─────────────────────────────────────────────────────── */

.c3xo-tooltip {
  position: fixed;
  z-index: 99999;
  width: 220px;
  max-width: calc(100vw - 20px);
  padding: 9px 12px;
  background: rgba(6, 12, 28, 0.97);
  border: 1px solid rgba(0, 200, 255, 0.28);
  border-radius: 5px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(200, 220, 255, 0.92);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}

.c3xo-tooltip--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Arrow */
.c3xo-tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 200, 255, 0.28);
}

/* Dark-sky override */
html.dark-sky-mode .c3xo-tooltip {
  background: rgba(20, 0, 0, 0.97);
  border-color: rgba(200, 50, 50, 0.4);
  color: rgba(255, 160, 160, 0.9);
}

/* Help badge (small ? indicator injected by JS) */
.c3xo-help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid rgba(0, 200, 255, 0.4);
  color: rgba(0, 200, 255, 0.7);
  font-family: var(--font-mono, monospace);
  font-size: 8px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}
.c3xo-help-badge:hover { border-color: var(--teal, #00c8ff); color: var(--teal, #00c8ff); }

/* In expert mode, help badges are less prominent */
html[data-experience-mode="expert"] .c3xo-help-badge {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.25);
}

/* ── Beginner-mode helper callouts (data-beginner-callout) ──────────────── */
/*
 * Use data-beginner-callout on any block to add a subtle beginner
 * context box around it. Expert mode hides these entirely.
 *
 * Example:
 *   <div data-beginner-callout data-help-tooltip="What this means...">
 *     Plain-language explanation here.
 *   </div>
 */
[data-beginner-callout] {
  border-left: 2px solid rgba(0, 200, 255, 0.3);
  padding-left: 10px;
  margin-top: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(200, 220, 255, 0.65);
  line-height: 1.55;
}
html[data-experience-mode="expert"] [data-beginner-callout] {
  display: none !important;
}

/* ── Labeling helpers ────────────────────────────────────────────────────── */
/*
 * Elements with data-beginner-label and data-expert-label swap their
 * visible text via JS (not CSS, to avoid empty element flash).
 * The JS in c3xo-experience-mode.js handles this via MutationObserver-free
 * swap on mode change. Use data-help-tooltip on the same element for extra
 * context in beginner mode.
 */

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .c3xo-tooltip { transition: none; }
}