/*
 * Shared design system for the microcertificate app.
 * Built on top of the site's existing --gk-* / --bs-* theme tokens (Bootstrap 5
 * + the "gk" theme in static_shared/frontend_assets/css/theme.min.css) -
 * no new palette, just a consistent, distinctive layer for this app's pages.
 *
 * Color-by-purpose convention:
 *   - Marketing/catalog/in-progress -> primary purple (--gk-primary)
 *   - Completion/success states     -> success green (--gk-success)
 *   - Exam/timer/urgency            -> warning amber -> danger red escalation
 *   - Public verification page      -> calmer, more "official" register
 */

/* ---------------------------------------------------------------------
   Shared keyframes (deduplicated from step_viewer.html, badge_reveal.html,
   quiz_question.html, partials/answer_feedback.html)
--------------------------------------------------------------------- */
@keyframes mc-step-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mc-badge-pop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes mc-feedback-pop {
  0%   { transform: scale(0.95); }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes mc-feedback-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
@keyframes mc-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
  70%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.mc-fade-in { animation: mc-step-fade-in .3s ease-out; }

/* ---------------------------------------------------------------------
   Eyebrow label - the small repeating "signature" element used above
   every H1/H2 across the app
--------------------------------------------------------------------- */
.mc-eyebrow {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gk-primary);
  margin-bottom: .75rem;
}

/* ---------------------------------------------------------------------
   Hero section background (replaces flat bg-light heroes)
--------------------------------------------------------------------- */
.mc-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px circle at 15% -10%, rgba(var(--gk-primary-rgb), .16), transparent 60%),
    linear-gradient(135deg, var(--gk-gray-100), var(--gk-body-bg));
}
.mc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--gk-primary-rgb), .14) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .6;
  pointer-events: none;
}
.mc-hero > .container { position: relative; }

[data-bs-theme=dark] .mc-hero {
  background:
    radial-gradient(1200px circle at 15% -10%, rgba(var(--gk-primary-rgb), .22), transparent 60%),
    linear-gradient(135deg, var(--gk-gray-800), var(--gk-gray-900));
}

/* ---------------------------------------------------------------------
   Brand-colored CTA band (replaces the risky bg-primary + text-white +
   btn-light combination that breaks contrast in dark mode)
--------------------------------------------------------------------- */
.mc-cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gk-primary), #5a35d9);
}
.mc-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.mc-cta-band > .container { position: relative; }

.mc-cta-btn {
  background: #fff;
  color: var(--gk-primary) !important;
  border: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
}
.mc-cta-btn:hover,
.mc-cta-btn:focus {
  background: #fff;
  color: var(--gk-primary) !important;
  transform: translateY(-1px);
  box-shadow: var(--gk-box-shadow-lg);
}

/* Forces literal white text - used inside brand-colored bands/icon circles
   where the theme's dark-mode ".text-white -> near-black" remap would
   otherwise break contrast (see [data-bs-theme=dark] .text-white in
   theme.min.css). Deliberately has NO dark-mode override. */
.mc-on-brand-text,
.mc-on-brand-text * { color: #fff !important; }

/* ---------------------------------------------------------------------
   Step viewer "stage" (step_viewer.html) - a soft gray backdrop so the
   white slide/quiz card visibly separates from the page instead of
   blending into an equally-white body background. Keeps attention on
   the card itself while working through a chapter.
--------------------------------------------------------------------- */
.mc-learn-stage {
  background: var(--gk-gray-100);
}

/* ---------------------------------------------------------------------
   Cards
--------------------------------------------------------------------- */
.mc-card {
  border-top: 4px solid var(--gk-primary);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mc-card:hover { transform: translateY(-2px); }
.mc-card-success { border-top-color: var(--gk-success); }
.mc-card-warning { border-top-color: var(--gk-warning); }
.mc-card-muted   { border-top-color: var(--gk-border-color); }

/* Locked-chapter card outline on course_overview.html - a deliberately
   subtle dashed border, not the default (near-black) Bootstrap border
   color. */
.mc-card-locked {
  border: 2px dashed var(--gk-border-color) !important;
}

/* "Abgeschlossen" pill on an already-completed course card (course_index.html) -
   same flat bg-*-subtle chip language as the "Aktion" pill, just anchored to
   the card corner. No shadow/gradient - nothing else in this app has one. */
.mc-completed-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* Dims title/description/step-pills on a locked chapter card so it visibly
   reads as "not unlocked yet" - the lock icon itself stays at full opacity
   as the deliberate visual cue. */
.mc-locked-content {
  opacity: .55;
}

/* ---------------------------------------------------------------------
   Icon badges - .icon-shape with a soft glow ring
--------------------------------------------------------------------- */
.mc-icon-badge {
  --mc-icon-ring: rgba(var(--gk-primary-rgb), .12);
  box-shadow: 0 0 0 8px var(--mc-icon-ring);
}
.mc-icon-badge-lg { width: 4.5rem; height: 4.5rem; font-size: 2rem; }
.mc-icon-badge-success { --mc-icon-ring: rgba(var(--gk-success-rgb), .14); }
.mc-icon-badge-warning { --mc-icon-ring: rgba(245, 158, 11, .16); }
.mc-icon-badge-danger  { --mc-icon-ring: rgba(220, 38, 38, .14); }

/* Badge tiers - gold (paid) / silver (free). Same soft diagonal gradient
   already used for .mc-hero, just scaled down to icon size and built from
   each color's own light/dark theme tokens (no new palette). Platin/Diamant
   reserved for future content types (regular courses, video trainings),
   not used yet. */
.mc-icon-badge-gold {
  --mc-icon-ring: rgba(var(--gk-warning-rgb), .18);
  background: linear-gradient(135deg, var(--gk-warning), var(--gk-dark-warning));
  color: #fff;
}
.mc-icon-badge-silver {
  --mc-icon-ring: rgba(var(--gk-secondary-rgb), .18);
  background: linear-gradient(135deg, var(--gk-secondary), var(--gk-dark-secondary));
  color: #fff;
}

.mc-tier-gold   { --mc-tier-accent: var(--gk-warning); }
.mc-tier-silver { --mc-tier-accent: var(--gk-secondary); }

/* ---------------------------------------------------------------------
   Meta chips (duration / badge type / step type / question count)
--------------------------------------------------------------------- */
.mc-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
/* The neutral bg-light/text-muted combo (duration + badge-type chips on
   course_index.html, "Ohne Abschlussprüfung" on course_landing.html, step
   pills + locked-chapter/status icons on course_overview.html, the "not
   found" icon on badge_verify_generic.html) - forced dark text. Covers both
   .badge elements and plain icon-shape divs using this combo; not scoped to
   .mc-pill/.badge specifically since not all of them carry those classes. */
.bg-light.text-muted {
  color: var(--gk-gray-900) !important;
}

/* ---------------------------------------------------------------------
   Course progress (step_viewer.html + course_overview.html): chapter
   checkpoints (dots) sit directly on top of the single track that
   advances across the whole course - one element, not two stacked bars.
--------------------------------------------------------------------- */
.mc-course-progress {
  position: relative;
  padding: 0 .75rem; /* half a dot-width, so a dot at 0%/100% stays fully inside */
}
.mc-course-progress-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: var(--gk-gray-200);
  border: 1px solid var(--gk-border-color);
  overflow: hidden;
}
.mc-course-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gk-primary);
  transition: width .4s ease-out;
}
.mc-course-progress-fill.is-complete { background: var(--gk-success); }

.mc-course-progress-nodes {
  position: relative;
  z-index: 1;
  height: 1.5rem;
}

.mc-progress-dot {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  background: var(--gk-gray-200);
  border: 2px solid var(--gk-body-bg, #fff);
  color: var(--gk-body-color);
}
.mc-progress-dot.is-completed { background: var(--gk-success); color: #fff; }
.mc-progress-dot.is-current {
  background: var(--gk-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--gk-primary-rgb), .18);
}

/* Vertical timeline rail behind chapter status icons on course_overview.html */
.mc-timeline { position: relative; }
.mc-timeline-item { position: relative; }
.mc-timeline-item::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.75rem;
  bottom: -1rem;
  width: 2px;
  background: var(--gk-border-color);
}
.mc-timeline-item:last-child::before { display: none; }

/* ---------------------------------------------------------------------
   Unified completion / state card (replaces 4 previously-duplicated
   badge-CTA blocks across course_overview.html / quiz_results.html)
--------------------------------------------------------------------- */
.mc-state-card {
  animation: mc-feedback-pop .4s ease-out;
  border-top: 4px solid var(--gk-border-color);
}
.mc-state-card-awaiting_exam { border-top-color: var(--gk-warning); }
.mc-state-card-exam_passed_unclaimed,
.mc-state-card-course_complete_unclaimed,
.mc-state-card-certified { border-top-color: var(--gk-success); }

/* ---------------------------------------------------------------------
   Quiz timer chip - three escalation states
--------------------------------------------------------------------- */
.mc-timer-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: var(--gk-border-radius-lg);
  background: var(--gk-info-bg-subtle, var(--gk-gray-100));
  color: var(--gk-body-color);
  border: 1px solid var(--gk-border-color);
}
.mc-timer-chip .mc-timer-value { font-size: 1.125rem; font-weight: 700; }
.mc-timer-chip--warn {
  background: var(--gk-warning-bg-subtle);
  border-color: var(--gk-warning-border-subtle);
  color: var(--gk-warning-text-emphasis, #92400e);
}
.mc-timer-chip--critical {
  background: var(--gk-danger-bg-subtle);
  border-color: var(--gk-danger-border-subtle);
  color: var(--gk-danger-text-emphasis, #7f1d1d);
  animation: mc-pulse-ring 1.6s infinite;
}

/* ---------------------------------------------------------------------
   Answer feedback (partials/answer_feedback.html)
--------------------------------------------------------------------- */
.mc-answer-btn {
  text-align: left;
  transition: all .2s ease;
}
.mc-answer-btn:not(.disabled):hover {
  background: #fff;
  border-color: var(--gk-primary);
  color: var(--gk-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--gk-primary-rgb), .3);
}
.mc-answer-btn:not(.disabled):active { transform: translateY(0); }
.mc-feedback-correct   { animation: mc-feedback-pop .3s ease-out; }
.mc-feedback-incorrect { animation: mc-feedback-shake .3s ease-out; }

/* ---------------------------------------------------------------------
   Slide content typography (partials/step_content.html)
--------------------------------------------------------------------- */
.mc-slide-content h1, .mc-slide-content h2, .mc-slide-content h3 {
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: .75rem;
}
.mc-slide-content ul, .mc-slide-content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.mc-slide-content li { margin-bottom: .4rem; }
.mc-slide-content code {
  background: var(--gk-gray-100);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-size: .875em;
}
.mc-slide-content pre {
  background: var(--gk-gray-100);
  padding: 1rem;
  border-radius: .5rem;
  overflow-x: auto;
}
.mc-slide-content table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.mc-slide-content table th, .mc-slide-content table td {
  padding: .5rem .75rem;
  border: 1px solid var(--gk-border-color);
}
.mc-slide-content table th { background: var(--gk-gray-100); }

/* ---------------------------------------------------------------------
   Callout boxes (content/*.md, embedded via md_in_html - see
   design_microcertificate/logic.py). Flat colored left border + subtle
   tint, no shadow - matches the rest of the app's shadow-free language.
--------------------------------------------------------------------- */
.mc-slide-content .mc-callout {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  border-left: 4px solid var(--gk-border-color);
  border-radius: var(--gk-border-radius);
  background: var(--gk-gray-100);
}
.mc-slide-content .mc-callout > p:first-child { margin: 0; line-height: 1; }
.mc-slide-content .mc-callout-icon { flex-shrink: 0; font-size: 1.25rem; }
.mc-slide-content .mc-callout-body { flex: 1; min-width: 0; }
.mc-slide-content .mc-callout-body > *:last-child { margin-bottom: 0; }

.mc-slide-content .mc-callout-tip {
  border-left-color: var(--gk-primary);
  background: rgba(var(--gk-primary-rgb), .06);
}
.mc-slide-content .mc-callout-success {
  border-left-color: var(--gk-success);
  background: rgba(var(--gk-success-rgb), .07);
}
.mc-slide-content .mc-callout-warning {
  border-left-color: var(--gk-warning);
  background: var(--gk-warning-bg-subtle);
}

/* "Golden rule" variant - one prominent, centered statement per chapter
   (e.g. "KI ist ein Werkzeug, kein Ersatz"). Top border instead of left,
   echoing .mc-card's top-border language, sized up to stand out. */
.mc-slide-content .mc-callout-rule {
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: none;
  border-top: 4px solid var(--gk-primary);
  background: rgba(var(--gk-primary-rgb), .06);
}
.mc-slide-content .mc-callout-rule .mc-callout-icon { font-size: 2rem; }
.mc-slide-content .mc-callout-rule .mc-callout-body { font-size: 1.15rem; font-weight: 700; }

/* ---------------------------------------------------------------------
   Side-by-side comparison cards (content/*.md - e.g. "vager vs. praeziser
   Prompt"). Stacks on narrow viewports.
--------------------------------------------------------------------- */
.mc-slide-content .mc-compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (min-width: 576px) {
  .mc-slide-content .mc-compare-grid { grid-template-columns: 1fr 1fr; }
}
.mc-slide-content .mc-compare-card {
  padding: 1rem 1.25rem;
  border-radius: var(--gk-border-radius);
  border-left: 4px solid var(--gk-border-color);
  background: var(--gk-gray-100);
}
.mc-slide-content .mc-compare-card > *:last-child { margin-bottom: 0; }
.mc-slide-content .mc-compare-card.is-bad {
  border-left-color: rgb(var(--gk-danger-rgb));
  background: var(--gk-danger-bg-subtle);
}
.mc-slide-content .mc-compare-card.is-good {
  border-left-color: var(--gk-success);
  background: rgba(var(--gk-success-rgb), .07);
}
.mc-slide-content .mc-compare-label {
  display: block;
  font-weight: 700;
  margin-bottom: .5rem;
}

/* ---------------------------------------------------------------------
   Prompt example box (content/*.md - literal prompt text to copy, used
   heavily in prompting-technique chapters). Dashed border sets it apart
   from the solid-border callouts above - this is quoted example input,
   not advice.
--------------------------------------------------------------------- */
.mc-slide-content .mc-prompt-example {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .85rem 1.1rem;
  margin: 1rem 0;
  border-radius: var(--gk-border-radius);
  background: var(--gk-gray-100);
  border: 1px dashed var(--gk-border-color);
}
.mc-slide-content .mc-prompt-example > p:first-child { margin: 0; line-height: 1.3; }
.mc-slide-content .mc-prompt-example-icon { flex-shrink: 0; opacity: .6; }
.mc-slide-content .mc-prompt-example-body { flex: 1; min-width: 0; font-style: italic; }
.mc-slide-content .mc-prompt-example-body > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Badge pages
--------------------------------------------------------------------- */
.mc-badge-icon-anim { animation: mc-badge-pop .8s cubic-bezier(.34, 1.56, .64, 1) .3s both; }

/* Certificate-style corner flourish for the claimed-badge hero card */
.mc-certificate-card {
  position: relative;
  border-top: 4px solid var(--mc-tier-accent, var(--gk-warning));
}

/* Calmer, more "official" register for the public verification page */
.mc-verify-card { border-top: 3px solid var(--mc-tier-accent, var(--gk-warning)); }
.mc-badge-id-chip {
  font-family: var(--bs-font-monospace, monospace);
  background: var(--gk-gray-100);
  border-radius: var(--gk-border-radius-pill);
  padding: .25rem .75rem;
}

/* Answer review rows (quiz_results.html) - tinted background matching the
   left border color instead of a flat white box */
.mc-review-item-correct   { background: rgba(var(--gk-success-rgb), .06); }
.mc-review-item-incorrect { background: rgba(220, 38, 38, .06); }