/* operator-skin.css — site-harmonization layer for the University of Luke demo.
 *
 * This demo is a FROZEN ARTIFACT: the static export of the University of
 * Luke app, copied as-is per PROJECTS-INTEGRATION-PLAN §8 (no re-export).
 * Its own files (style.css, the inline <style> in index.html, app.js, the
 * data/*.json corpus) are never edited; this stylesheet is injected as the
 * LAST stylesheet <link> in index.html and remaps the export's dark blue
 * UI onto the site's operator scheme (DESIGN-REWORK-status-first §1):
 * warm paper ground, surface cards, green actions/links, gold secondary
 * accent, Inter-first type, flat (no shadows, hover = background shift).
 * The concept-map canvas keeps an always-dark ground because app.js draws
 * light node labels onto it — it is treated as a dark data panel (the
 * family signature). If the demo is ever re-synced from the upstream
 * export, re-inject the <link> and keep this file.
 * Offline-first: no external URLs.
 */

/* ---------- token remap (style.css custom properties) ---------- */
:root {
  --bg: #f4f1ea;
  --panel: #fffdf8;
  --panel-2: #efe9dc;
  --border: #e3dccd;
  --text: #1a1613;
  --muted: #6c5f4c;
  --accent: #2f6f48;     /* blue -> operator green */
  --accent-2: #7a5f12;   /* yellow -> gold-as-text ink variant */
  --danger: #8a2b20;
  --ok: #2f6f48;
  --sepia: #c2a23a;      /* card left-border accent -> operator gold */
}

html, body { font-family: Inter, "Segoe UI", system-ui, sans-serif; }

/* ---------- dark-on-accent text was tuned for the old light-blue accent;
   operator green needs light text ---------- */
.btn.primary { color: #ffffff; }
.btn.primary:hover { filter: none; background: #285f3e; border-color: #285f3e; }
.chip.active { color: #ffffff; }
.s-nav button.active { color: #ffffff; }
.count-badge { background: #c2a23a; color: #1a1613; }

/* ---------- hardcoded dark-theme tints -> operator tints ---------- */
.explorer { background: var(--panel); }
.ai-summary {
  background: rgba(47, 111, 72, 0.05);
  border-color: rgba(47, 111, 72, 0.35);
}
.group-note { background: rgba(194, 162, 58, 0.10); border-color: rgba(194, 162, 58, 0.35); }
.group-note b { color: #7a5f12; }
.fac-acc[open] { border-color: #d9d0bf; }
.ex-group-count { border-color: rgba(47, 111, 72, 0.4); }
.ex-group-err { color: #8a2b20; border-color: #f0c8c2; }
.api-chip.live { border-color: rgba(47, 111, 72, 0.5); }
.m-api .auth.none { border-color: rgba(47, 111, 72, 0.4); }
.m-api .auth.key { color: #7a5f12; border-color: rgba(194, 162, 58, 0.5); }
.m-api .auth.oauth { border-color: rgba(47, 111, 72, 0.4); }
.m-api .live-badge { border-color: rgba(47, 111, 72, 0.5); }
.cites li .ckind.foundational { color: #7a5f12; border-color: rgba(194, 162, 58, 0.4); }
.cites li .ckind.reference { border-color: rgba(47, 111, 72, 0.4); }
#preview-save.on { border-color: rgba(194, 162, 58, 0.5); }
.mk-course:hover { background: rgba(47, 111, 72, 0.08); }
.quiz-opt.correct { border-color: #3a9d5d; background: rgba(58, 157, 93, 0.12); }
.quiz-opt.wrong { border-color: #8a2b20; background: rgba(138, 43, 32, 0.10); }
.modal { background: rgba(26, 22, 19, 0.45); }

/* ---------- flat: no shadows, no hover lift — background/border shifts ---------- */
.preview { box-shadow: none; }
.toast { box-shadow: none; }
.queue-banner { box-shadow: none; border-color: #c2a23a; }
.card:hover, .rec-card:hover { transform: none; }

/* ---------- operator radii: 8px cards / 6px controls ---------- */
button, .btn, .s-nav button { border-radius: 6px; }
.card, .s-card, .rec-card, .fac-acc, .entry, .s-searchbar input,
.modal-card, .flashcard, #map-canvas, .ask-form input[type=text],
.builder-form input[type=text], .lib-controls input, .quiz-opt,
.mk-all-bar, .queue-banner, .group-note, .s-note, .ai-summary { border-radius: 8px; }
.api-chip, .ckind, .m-list li, .dd-model, .mk-course { border-radius: 3px; }

/* ---------- always-dark data panels (family signature) ---------- */
#map-canvas { background: #1c1916; border-color: #3a342c; }  /* app.js draws light labels */
.preview-content pre, .dd-content pre {
  background: #1c1916; color: #d6cfc0; border-radius: 8px;
}
.preview-content code, .dd-content code { background: #1c1916; color: #d6cfc0; border-radius: 3px; }
.preview-content pre code, .dd-content pre code { background: none; }

/* ---------- dark mode (site operator dark values) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1916;
    --panel: #26221d;
    --panel-2: #322c25;
    --border: #3a342c;
    --text: #e8e2d6;
    --muted: #b3a890;
    --accent: #6fae84;
    --accent-2: #c2a23a;   /* gold-as-text reads fine on dark */
    --danger: #d08a7d;
    --ok: #6fae84;
  }
  .btn.primary, .chip.active, .s-nav button.active {
    background: #2f6f48; border-color: #2f6f48; color: #e8e2d6;
  }
  .btn.primary:hover { background: #285f3e; border-color: #285f3e; }
  .count-badge { background: #c2a23a; color: #1c1916; }
  .ai-summary { background: rgba(111, 174, 132, 0.07); border-color: rgba(111, 174, 132, 0.3); }
  .group-note { background: rgba(194, 162, 58, 0.08); border-color: rgba(194, 162, 58, 0.3); }
  .group-note b { color: #c2a23a; }
  .fac-acc[open] { border-color: #4a4338; }
  .ex-group-err { color: #d08a7d; border-color: #5a3a33; }
  .m-api .auth.key { color: #c2a23a; }
  .cites li .ckind.foundational { color: #c2a23a; }
  .quiz-opt.correct { border-color: #6fae84; background: rgba(111, 174, 132, 0.14); }
  .quiz-opt.wrong { border-color: #d08a7d; background: rgba(208, 138, 125, 0.10); }
  .modal { background: rgba(0, 0, 0, 0.6); }
}