/* reasoning-lab v3 — NON-MUTATING annotation overlay */
/* https://github.com/kwadwoadu/reasoning-lab */
/*
 * INVARIANT: this stylesheet MUST NOT contain any selector that targets
 * a prototype element (e.g. [data-reasoning]). It styles ONLY #rl-overlay
 * and its descendants. v1/v2's `[data-reasoning]{position:relative}` was
 * the always-on reflow bug — it is GONE and must never return.
 * Guarded by verify-no-reflow.mjs + skills/prototype.eval.json.
 */

:root {
  --r-bg: oklch(0.13 0.005 260 / 0.92);
  --r-bg-solid: oklch(0.13 0.005 260);
  --r-text: oklch(0.92 0.01 260);
  --r-text-dim: oklch(0.58 0.02 260);
  --r-text-faint: oklch(0.40 0.01 260);
  --r-border-faint: oklch(0.18 0.005 260);
  --r-surface: oklch(0.16 0.005 260 / 0.6);
  --r-width: 380px;
  --r-badge: 22px;
  --r-z: 2147483000;

  --r-brand: oklch(0.65 0.14 45);
  --r-ux: oklch(0.65 0.14 250);
  --r-perf: oklch(0.72 0.18 145);
  --r-a11y: oklch(0.62 0.18 310);
  --r-biz: oklch(0.75 0.15 75);
  --r-tech: oklch(0.55 0.02 260);
  --r-uncategorized: oklch(0.55 0.02 260);
}

@media (prefers-color-scheme: light) {
  :root {
    --r-bg: oklch(0.97 0.005 260 / 0.92);
    --r-bg-solid: oklch(0.97 0.005 260);
    --r-text: oklch(0.18 0.01 260);
    --r-text-dim: oklch(0.45 0.02 260);
    --r-text-faint: oklch(0.62 0.01 260);
    --r-border-faint: oklch(0.92 0.005 260);
    --r-surface: oklch(0.94 0.005 260 / 0.6);
  }
}

/* =============================================
   The overlay layer — the ONLY thing we own.
   Fixed, full-viewport, click-through. Never in
   document flow, never affects the prototype.
   ============================================= */

#rl-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--r-z);
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* When OFF: badges + panel are display:none. Overlay div stays in the
   DOM but is inert and invisible, so the prototype is byte-identical
   to having no overlay at all. */
#rl-overlay .rl-badge,
#rl-overlay .rl-panel { display: none; }

/* =============================================
   Badges — children of the overlay, positioned
   by JS via transform (viewport coords). They
   are NEVER appended into a prototype element.
   ============================================= */

.rl-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--r-badge);
  height: var(--r-badge);
  /* 44px hit target without changing visual size (WCAG 2.5.5) */
  padding: 11px;
  margin: -11px;
  box-sizing: content-box;
  border: none;
  background: clip-padding;
  cursor: pointer;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}

.rl-badge::before {
  content: attr(data-i);
  position: absolute;
  inset: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--r-uncategorized);
  color: oklch(1 0 0);
  font: 700 10px/1 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.3), 0 0 0 2px oklch(0 0 0 / 0.15);
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-badge:hover::before { transform: scale(1.18); }

.rl-badge[data-cat="brand"]::before { background: var(--r-brand); }
.rl-badge[data-cat="ux"]::before { background: var(--r-ux); }
.rl-badge[data-cat="performance"]::before { background: var(--r-perf); }
.rl-badge[data-cat="accessibility"]::before { background: var(--r-a11y); }
.rl-badge[data-cat="business"]::before { background: var(--r-biz); }
.rl-badge[data-cat="technical"]::before { background: var(--r-tech); }

html.rl-on #rl-overlay .rl-badge {
  display: block;
  pointer-events: auto;
  animation: rl-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.rl-badge.rl-hidden { display: none !important; }

@keyframes rl-pop { from { opacity: 0; } to { opacity: 1; } }

/* =============================================
   Legend / panel — fixed sidebar inside overlay
   ============================================= */

.rl-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--r-width);
  height: 100vh;
  background: var(--r-bg);
  backdrop-filter: blur(32px) saturate(1.3);
  -webkit-backdrop-filter: blur(32px) saturate(1.3);
  color: var(--r-text);
  border-left: 1px solid var(--r-border-faint);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  box-shadow: -8px 0 40px oklch(0 0 0 / 0.25);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html.rl-on #rl-overlay .rl-panel { display: block; transform: translateX(0); }

.rl-panel-header {
  position: sticky;
  top: 0;
  background: var(--r-bg-solid);
  padding: 24px 20px 16px;
  border-bottom: 1px solid var(--r-border-faint);
}
.rl-panel-kicker {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--r-text-dim); margin: 0 0 2px;
}
.rl-panel-count {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--r-text); font-variant-numeric: tabular-nums; display: block;
}

.rl-entry {
  padding: 14px 20px; border-left: 3px solid transparent; cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.rl-entry + .rl-entry { border-top: 1px solid var(--r-border-faint); }
.rl-entry:hover { background: var(--r-surface); border-left-color: var(--r-text-faint); }
.rl-entry-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.rl-entry-i {
  font: 600 10px/1 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  color: var(--r-text-faint); flex-shrink: 0;
}
.rl-entry-i::before { content: '#'; }
.rl-entry-label { font-weight: 600; font-size: 13px; color: var(--r-text); }
.rl-entry-tag {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; margin-left: auto; color: var(--r-text-dim);
}
.rl-entry-why { font-size: 12px; color: var(--r-text-dim); line-height: 1.6; }
.rl-entry.rl-hidden { display: none !important; }

/* =============================================
   Toggle button
   ============================================= */

.rl-toggle {
  position: fixed; bottom: 20px; right: 20px; height: 40px;
  padding: 0 16px; border-radius: 10px;
  background: oklch(0.15 0.005 260 / 0.88);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--r-text); border: 1px solid oklch(1 0 0 / 0.08);
  cursor: pointer; pointer-events: auto;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.2);
  transition: transform 0.15s ease, right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.rl-toggle:hover { transform: translateY(-1px); }
html.rl-on .rl-toggle { right: calc(var(--r-width) + 20px); }
.rl-toggle-n {
  font: 600 12px/1 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
  color: var(--r-text-dim); font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .rl-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: 100%;
    height: 65vh; border-left: none;
    border-top: 1px solid var(--r-border-faint);
    border-radius: 14px 14px 0 0; transform: translateY(100%);
  }
  html.rl-on #rl-overlay .rl-panel { transform: translateY(0); }
  html.rl-on .rl-toggle { right: 20px; bottom: calc(65vh + 20px); }
}

@media print { #rl-overlay { display: none !important; } }