/* Preppa v2 - SPA stylesheet (Headliners house style).
 *
 * Holds the few things Tailwind utility classes cannot express cleanly: keyframe
 * animations and the print stylesheet. This file is linked AFTER the built
 * styles.css so its rules layer on top of the compiled Tailwind output. All
 * animations are wrapped so that users who ask the OS for reduced motion get a
 * calm, motionless interface (the @media (prefers-reduced-motion: reduce) block
 * at the bottom disables every animation defined above).
 */

/* ---------- brand rainbow underline (the 6 Headliners discipline colours) ---------- */
/* Decorative bar under the sidebar wordmark. aria-hidden in the markup; purely visual.
   Order: Cloud, Dev, Data/AI, Security, Business, Test/QA. */
.brand-rainbow {
  height: 3px;
  width: 124px;
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    #00c0f3 0 16.66%,
    #5f6db3 16.66% 33.33%,
    #f386a7 33.33% 50%,
    #f15a22 50% 66.66%,
    #ffcb05 66.66% 83.33%,
    #6ac17b 83.33% 100%
  );
}

/* ---------- dark sidebar footer: keep the XP widget legible on #0c191c ---------- */
/* The footer lives in the dark merkbalk, but the shared xpBar widget hard-codes
   light-surface colours (text-slate-900 text label, text-slate-500 muted count,
   bg-slate-200 track, bg-brand-dark fill). Re-tint ONLY inside the footer so the
   widget stays correct on the white dashboard card:
     - label  -> cream #f2eee6 (~16:1 on dark)
     - count  -> slate-300 #cfc7b6 (~9:1)
     - track  -> faint white wash (subtle on dark)
     - fill   -> white (the dark fill would vanish on a dark surface) */
#sidebar-footer .text-slate-900 { color: #f2eee6; }
#sidebar-footer .text-slate-500 { color: #cfc7b6; }
#sidebar-footer .bg-slate-200 { background-color: rgba(255, 255, 255, 0.16); }
#sidebar-footer .bg-brand-dark { background-color: #ffffff; }

/* ---------- card entry animation (moved from the v1 index.html) ---------- */
@keyframes prepFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.prep-card { animation: prepFadeIn 0.35s ease-out both; }

/* ---------- toast slide + fade ---------- */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}
.sp-toast { animation: toastIn 0.25s ease-out both; }
.sp-toast--leaving { animation: toastOut 0.3s ease-in both; }

/* ---------- level-up pulse ---------- */
@keyframes levelUpPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.sp-toast--levelup { animation: toastIn 0.25s ease-out both, levelUpPulse 0.6s ease-out 0.25s 1; }

/* ---------- streak flame pulse ---------- */
@keyframes streakFlamePulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}
.sp-streak-flame { animation: streakFlamePulse 1.8s ease-in-out infinite; }

/* ---------- reduced-motion guard: disable everything above ---------- */
@media (prefers-reduced-motion: reduce) {
  .prep-card,
  .sp-toast,
  .sp-toast--leaving,
  .sp-toast--levelup,
  .sp-streak-flame {
    animation: none !important;
  }
}

/* ---------- print-only header block: hidden on screen, shown on paper ---------- */
.print-only { display: none; }

/* ---------- print stylesheet: show only the report, format it cleanly for paper ---------- */
@media print {
  /* Hide all page chrome: sidebar/top nav, toasts, and anything marked no-print. */
  #app-nav,
  #app-sidebar,
  #toasts,
  #toasts-assertive,
  .no-print {
    display: none !important;
  }

  /* Reveal the print-only report header and give it a calm Preppa brand block. */
  .print-only { display: block !important; }
  .print-only {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #0c191c; /* Headliners dark */
  }
  .print-only .print-brand {
    font-family: "Barlow Condensed", "Barlow Semi Condensed", "Arial Narrow", "Barlow", sans-serif;
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #0c191c !important;
    margin: 0;
  }
  .print-only .print-sub {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4f4b43 !important; /* Headliners slate-600 */
    margin-top: 2px;
  }
  .print-only .print-meta {
    margin-top: 0.5rem;
    font-size: 12px;
    color: #33312b !important; /* Headliners slate-700 */
  }
  .print-only .print-meta p { margin: 1px 0; }

  /* Light, readable page: no dark backgrounds, sensible margins. */
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0;
    padding: 0;
  }
  #app-shell { display: block !important; }
  #app-main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  #view-root { margin-top: 0 !important; }
  @page { margin: 1.5cm; }

  /* Flatten card chrome and avoid awkward page breaks mid-card. */
  .prep-card {
    animation: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    border: 1px solid #e3ddd0; /* warm Headliners neutral (was cool slate #cbd5e1) */
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }
  .prep-card * { background: transparent !important; }

  /* Keep collapsible tips (forced open before print) readable. */
  details { break-inside: avoid; page-break-inside: avoid; }
  summary { color: #000000 !important; }
}