/**
 * Shared shell for CyberCorrect regulatory readiness tools.
 * Uses cybercorrect-theme.css variables; scoped under .reg-review-tool-scope.
 *
 * Standard page stack (in order):
 *   tailwind.css → app.css → cybercorrect-theme.css → nav-fixes.css → breadcrumb.css
 *   → regulatory-review-shell.css → regulatory-review-tools.css
 *
 * Tool markup: <main>…<section class="py-6 md:py-10"><div class="reg-review-tool-scope container">…</div></section></main>
 * Use the same header / context-bar / progress / q-card patterns from regulatory-review-tools.css for visual parity.
 */

.reg-review-tool-scope {
  --rr-text: var(--foreground);
  --rr-muted: var(--muted-foreground);
  --rr-surface: var(--card);
  --rr-surface-mid: color-mix(in srgb, var(--card) 90%, var(--border));
  --rr-surface-deep: color-mix(in srgb, var(--card) 78%, var(--border));
  --rr-border-strong: color-mix(in srgb, var(--border) 82%, var(--foreground));
  --rr-primary: var(--primary);
  --rr-accent-cyan: var(--accent);
  --rr-warning: var(--warning);
  --rr-success: var(--success);
  --rr-error: var(--error);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--rr-text);
  position: relative;
  z-index: 1;
}

.reg-review-tool-scope .font-mono-rr {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}

.dark .reg-review-tool-scope .pill-blue,
.reg-review-tool-scope .pill-blue {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dark .reg-review-tool-scope .pill-amber,
.reg-review-tool-scope .pill-amber,
.reg-review-tool-scope .pill-gold {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.dark .reg-review-tool-scope .pill-teal,
.reg-review-tool-scope .pill-teal {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.dark .reg-review-tool-scope .pill-green,
.reg-review-tool-scope .pill-green {
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.dark .reg-review-tool-scope .pill-red,
.reg-review-tool-scope .pill-red {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

/* Citation chip next to question stems (GDPR, CCPA, and other reg-review tools) */
.reg-review-tool-scope .reg-ref {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
}