/* QUEST custom styles — sit on top of Tailwind. Auto-adapts to OS theme. */

[v-cloak] { display: none !important; }

/* Top navigation progress bar — discreet ~700ms ease-out from 0% to 100% then fades */
.nav-progress-fill {
  width: 0%;
  animation: navProgress 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes navProgress {
  0%   { width: 0%;   opacity: 1; }
  20%  { width: 30%;  opacity: 1; }
  60%  { width: 78%;  opacity: 1; }
  85%  { width: 95%;  opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

*:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Base body — quest-app class. Dark by default; light via prefers-color-scheme.
   ───────────────────────────────────────────────────────────────────────── */
body.quest-app {
  background-color: #0a0e1a;            /* dark default — maintains current look */
  color: #f1f5f9;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(34, 211, 238, 0.08), transparent 60%);
  background-attachment: fixed;
}

@media (prefers-color-scheme: light) {
  body.quest-app {
    background-color: #fafafa;
    color: #0f172a;
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(139, 92, 246, 0.08), transparent 60%),
      radial-gradient(ellipse 60% 40% at 90% 100%, rgba(34, 211, 238, 0.05), transparent 60%);
  }

  /* === Surface inversions for the bg-ink-* / bg-white/* heuristics === */
  body.quest-app [class*="bg-ink-950"]:not([class*="from-"]):not([class*="to-"]) {
    background-color: #fafafa !important;
  }
  body.quest-app [class*="bg-ink-900"]:not([class*="from-"]):not([class*="to-"]) {
    background-color: #f4f4f5 !important;
  }

  /* "white" overlays in dark = "black" overlays in light */
  body.quest-app .bg-white\/5,
  body.quest-app .bg-white\/\[0\.02\],
  body.quest-app .bg-white\/\[0\.04\] {
    background-color: rgba(0, 0, 0, 0.03) !important;
  }
  body.quest-app .bg-white\/\[0\.05\],
  body.quest-app .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.06) !important;
  }
  body.quest-app .hover\:bg-white\/5:hover,
  body.quest-app .hover\:bg-white\/\[0\.03\]:hover,
  body.quest-app .hover\:bg-white\/\[0\.04\]:hover,
  body.quest-app .hover\:bg-white\/\[0\.05\]:hover,
  body.quest-app .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
  body.quest-app .bg-black\/20,
  body.quest-app .bg-black\/30,
  body.quest-app .bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }
  body.quest-app .bg-ink-950\/80,
  body.quest-app .bg-ink-950\/95 {
    background-color: rgba(255, 255, 255, 0.85) !important;
  }

  /* Borders */
  body.quest-app .border-white\/5,
  body.quest-app .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
  body.quest-app .border-white\/15,
  body.quest-app .border-white\/20,
  body.quest-app .border-white\/25 {
    border-color: rgba(0, 0, 0, 0.15) !important;
  }
  body.quest-app .hover\:border-white\/20:hover,
  body.quest-app .hover\:border-white\/25:hover,
  body.quest-app .hover\:border-white\/30:hover {
    border-color: rgba(0, 0, 0, 0.25) !important;
  }

  /* Text colors — invert slate scale */
  body.quest-app .text-white,
  body.quest-app .text-slate-100 {
    color: #0f172a !important;
  }
  body.quest-app .text-slate-200 { color: #1e293b !important; }
  body.quest-app .text-slate-300 { color: #334155 !important; }
  body.quest-app .text-slate-400 { color: #475569 !important; }
  body.quest-app .text-slate-500 { color: #64748b !important; }
  body.quest-app .text-slate-600 { color: #94a3b8 !important; }
  body.quest-app .hover\:text-white:hover,
  body.quest-app .hover\:text-slate-100:hover { color: #0f172a !important; }
  body.quest-app .hover\:text-slate-300:hover { color: #1e293b !important; }
  body.quest-app .group:hover .group-hover\:text-white { color: #0f172a !important; }

  /* Welcome screen "Entrar" button is white-on-dark; invert */
  body.quest-app button.bg-white,
  body.quest-app .bg-white {
    background-color: #0f172a !important;
    color: #fafafa !important;
  }
  body.quest-app button.bg-white:hover,
  body.quest-app .hover\:bg-slate-200:hover {
    background-color: #1e293b !important;
  }
  /* The black "text-ink-950" on white buttons becomes light text */
  body.quest-app .text-ink-950 { color: #fafafa !important; }

  /* Pill backgrounds (section-pill) keep their color but text needs adjustment for the lighter fills */
  /* Code block backgrounds */
  body.quest-app pre,
  body.quest-app code:not([class*="bg-"]) {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #1e293b !important;
  }
  body.quest-app pre {
    border-color: rgba(0, 0, 0, 0.08) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Scrollbar — neutral that works in both
   ───────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(127, 127, 127, 0.5); background-clip: padding-box; }
* { scrollbar-color: rgba(127,127,127,0.3) transparent; scrollbar-width: thin; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

article.group { transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease; }

code::selection, pre::selection { background: rgba(167, 139, 250, 0.35); }

/* ─────────────────────────────────────────────────────────────────────────
   Editor page — keep its own light styling (independent)
   ───────────────────────────────────────────────────────────────────────── */
.editor-page { background: #f6f8fb; color: #172033; }
.editor-page .panel { background: #fff; border: 1px solid #d9e0ea; border-radius: 12px; }
.editor-page .panel-header { padding: 16px; border-bottom: 1px solid #d9e0ea; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.editor-page .panel-title { margin: 0; font-size: 16px; font-weight: 700; }
.editor-page .panel-body { padding: 16px; }
.editor-page .field { display: grid; gap: 6px; margin-bottom: 12px; }
.editor-page .field label { font-weight: 700; font-size: 13px; }
.editor-page .field input,
.editor-page .field textarea,
.editor-page .field select {
  border: 1px solid #d9e0ea; border-radius: 8px; padding: 10px;
  background: #fff; color: #172033; font: inherit;
}
.editor-page .field textarea { min-height: 92px; resize: vertical; }
.editor-page .button { border: 1px solid #d9e0ea; background: #fff; color: #172033; border-radius: 8px; padding: 9px 14px; cursor: pointer; font-weight: 650; }
.editor-page .button.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.editor-page .button.danger { color: #e11d48; }
.editor-page .pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: #eef2f7; color: #475569; font-size: 12px; font-weight: 700; }

.editor-page .editor-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-page .quest-map { display: grid; gap: 12px; }
.editor-page .quest-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid #d9e0ea; border-radius: 8px; padding: 12px; background: #fff; cursor: pointer; }
.editor-page .quest-card.active { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.editor-page .node { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #e8f0ff; color: #2563eb; font-weight: 800; }
.editor-page .quest-card h3 { margin: 0; font-size: 15px; }
.editor-page .quest-card p { margin: 4px 0 0; color: #647084; line-height: 1.45; }
.editor-page .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.editor-page .headline h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.editor-page .headline p { margin: 6px 0 0; color: #647084; }
.editor-page .empty { display: grid; place-items: center; min-height: 220px; color: #647084; text-align: center; }

@media (max-width: 980px) {
  .editor-page .editor-grid { grid-template-columns: 1fr; }
}