/* ============================================================================
   PRÜFUNGSMEISTER — EMOTIONAL DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css so it can raise the floor globally without rewriting
   3,000 lines of existing rules.

   Design lineage — chosen deliberately, not decoratively:
     Dieter Rams / Braun  "Weniger, aber besser." Restraint as respect.
     Bauhaus              Geometry, function, honest structure, no ornament.
     Modern German build  Cool neutrals, precision, generous air, quiet confidence.
     Goethe-Institut      The deep green is kept: it is the exam's own colour.

   The emotional thesis: a student arrives anxious. Every decision here either
   lowers that anxiety or is removed. Calm is not the absence of design — it is
   the result of rhythm, hierarchy and predictability.
   ========================================================================= */

:root {
  /* --- SPACING: one 4px grid. -------------------------------------------
     The old interface had NO spacing scale, so every gap was invented at the
     point of use. That is precisely why it read as "random". German design
     feeling comes from mathematical consistency, not from ornament. */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* --- TYPE SCALE: restrained, readable, hierarchical. -------------------
     Eight steps, no more. Body sits at 15–17px because learners read long
     German passages here and comfort outranks density. */
  --t-xs:   12px;  --t-sm:   13px;  --t-base: 15px;  --t-md:   17px;
  --t-lg:   20px;  --t-xl:   25px;  --t-2xl:  32px;  --t-3xl:  40px;

  --lh-tight: 1.2;      /* display */
  --lh-snug:  1.4;      /* headings */
  --lh-base:  1.6;      /* UI text */
  --lh-relaxed: 1.75;   /* long-form German reading */

  --tracking-tight: -0.02em;   /* large display text */
  --tracking-wide:   0.08em;   /* small caps labels */

  /* --- ELEVATION: layered, never muddy. ----------------------------------
     Two stacked shadows per level (a tight contact shadow + a soft ambient
     one) is what separates "premium" from "drop-shadow". Deliberately gentle:
     this is a study room, not a dashboard demo. */
  /* Ambient layers strengthened for the white-surface light theme (2026-08-05
     migration): on #FFFFFF cards over a #FAFAF9 page the old 1-3px pairs were
     measurably invisible, collapsing hierarchy onto the hairline alone. Still
     gentle — a study room, not a dashboard demo. */
  --e-0: none;
  --e-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 3px 10px rgba(16, 24, 40, 0.07);
  --e-2: 0 2px 4px rgba(16, 24, 40, 0.05), 0 8px 20px rgba(16, 24, 40, 0.10);
  --e-3: 0 8px 16px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.12);
  --e-focus: 0 0 0 3px rgba(15, 76, 58, 0.16);

  /* --- MOTION: a language, not a setting. --------------------------------
     Entrances decelerate (things arrive and settle). Exits are quicker than
     entrances. Nothing bounces except a genuine achievement. */
  --d-instant: 100ms;  --d-fast: 160ms;  --d-base: 220ms;
  --d-slow:    320ms;  --d-deliberate: 480ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* arrivals */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* movement */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* celebration only */

  /* --- GERMAN IDENTITY: a thread, never a flag. --------------------------
     Schwarz-Rot-Gold appears as a 3px rule, and nowhere else. It reads as a
     national mark the way a passport edge does — peripheral, quiet, certain.
     Used loudly it would look touristy, which is the failure mode to avoid. */
  --de-black: #16161A;
  --de-red:   #C8102E;   /* deepened from flag red: sits with the green */
  --de-gold:  #E8B647;   /* warmed: the flag's gold, not the UI accent gold */
  --de-thread: linear-gradient(90deg,
                var(--de-black) 0%, var(--de-black) 33.3%,
                var(--de-red)  33.3%, var(--de-red)  66.6%,
                var(--de-gold) 66.6%, var(--de-gold) 100%);

  /* Reading measure: German compounds are long; 68ch keeps lines scannable. */
  --measure: 68ch;
}

/* Dark theme keeps the same system, re-weighted for a luminous surface. */
body.dark-theme {
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.24);
  --e-2: 0 2px 6px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.30);
  --e-3: 0 10px 24px rgba(0, 0, 0, 0.40), 0 24px 56px rgba(0, 0, 0, 0.44);
  --e-focus: 0 0 0 3px rgba(46, 139, 111, 0.32);
  --de-black: #24312B;   /* on the green-black field, pure black would vanish */
}

/* ============================================================================
   1. THE GERMAN THREAD
   A single 3px rule across the top of the viewport. This is the entire
   national identity of the interface. Nothing else is needed.
   ========================================================================= */
.de-thread {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--de-thread);
  z-index: 9999;
  pointer-events: none;
  /* Arrives once, on load — a curtain rising, not an animation loop. */
  animation: de-thread-in var(--d-deliberate) var(--ease-out) both;
}
@keyframes de-thread-in {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}
/* On the dark field the same 3px rule at full strength reads as a stripe of
   decoration rather than a passport edge. Thinner and quieter restores the
   peripheral weight it has on cream. */
body.dark-theme .de-thread {
  height: 2px;
  opacity: 0.6;
}

/* ============================================================================
   2. ARRIVAL — the first two seconds decide how the room feels.
   Content rises a few pixels and settles. Never slides far; distance reads as
   busy. Stagger is capped at 6 children so a long list never feels sluggish.
   ========================================================================= */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.enter        { animation: rise-in var(--d-base) var(--ease-out) both; }
.enter-stagger > *                { animation: rise-in var(--d-base) var(--ease-out) both; }
.enter-stagger > *:nth-child(1)   { animation-delay: 0ms; }
.enter-stagger > *:nth-child(2)   { animation-delay: 40ms; }
.enter-stagger > *:nth-child(3)   { animation-delay: 80ms; }
.enter-stagger > *:nth-child(4)   { animation-delay: 120ms; }
.enter-stagger > *:nth-child(5)   { animation-delay: 160ms; }
.enter-stagger > *:nth-child(n+6) { animation-delay: 200ms; }

/* ============================================================================
   3. SURFACES — quiet depth.
   The old light theme was completely flat (shadow: none). Flat reads as
   "unfinished" rather than "minimal"; minimal still has hierarchy.
   ========================================================================= */
.card,
.glass-card,
.stat-box,
.linear-item,
.table-container,
.writing-editor-pane {
  box-shadow: var(--e-1);
  transition: box-shadow var(--d-base) var(--ease-out),
              transform  var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
/* Only things that DO something lift. Static cards staying put is information. */
a.card:hover, button.card:hover,
.card[onclick]:hover, .linear-item[onclick]:hover,
.glass-card[onclick]:hover, .stat-box[onclick]:hover {
  box-shadow: var(--e-2);
  transform: translateY(-2px);
}

/* ============================================================================
   4. FOCUS — dignity for the keyboard.
   A visible, precise ring everywhere. Never removed: an invisible focus state
   is an accessibility failure dressed as minimalism.
   ========================================================================= */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-indigo);
  outline-offset: 2px;
  box-shadow: var(--e-focus);
  border-radius: var(--border-radius-lg);
}

/* ============================================================================
   5. THE GREETING — the emotional entry point.
   A student is met by name, in German, at the right hour. This is the single
   highest-leverage emotional element in the product: it costs nothing and it
   says "this place knows you and expects you".
   ========================================================================= */
.greeting {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  animation: rise-in var(--d-slow) var(--ease-out) both;
}
.greeting-time {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
/* A 24px segment of the national thread, as a dateline rule. */
.greeting-time::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--de-thread);
  flex: none;
}
.greeting-title {
  font-family: var(--font-heading);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}
.greeting-sub {
  font-size: var(--t-md);
  line-height: var(--lh-base);
  color: var(--text-secondary);
  max-width: var(--measure);
  margin: 0;
}

/* ============================================================================
   6. READING — long German text should feel like a book, not a form.
   ========================================================================= */
.reading-surface,
.writing-textarea,
.exam-resource {
  max-width: var(--measure);
  line-height: var(--lh-relaxed);
  font-size: var(--t-md);
  hyphens: auto;              /* German compounds break gracefully */
  -webkit-hyphens: auto;
}

/* ============================================================================
   7. CELEBRATION — earned, quiet, and rare.
   Motivation psychology: acknowledgement must be proportional. Over-celebration
   is flattery, and CLAUDE.md forbids flattering a learner. One warm pulse.
   ========================================================================= */
@keyframes celebrate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.celebrate { animation: celebrate var(--d-deliberate) var(--ease-spring) both; }

@keyframes ring-fill {
  from { stroke-dashoffset: var(--ring-circumference, 314); }
}
.progress-ring-value {
  transition: stroke-dashoffset var(--d-deliberate) var(--ease-out);
}

/* ============================================================================
   8. LOADING — patience should feel considered, not broken.
   A calm shimmer beats a spinner: it implies "arriving", not "stuck".
   ========================================================================= */
@keyframes shimmer { to { background-position-x: -200%; } }
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-surface-elevated) 0%,
    var(--bg-surface-hover)   50%,
    var(--bg-surface-elevated) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--border-radius-lg);
}
.skeleton-line { height: 12px; margin-bottom: var(--s-2); }
.skeleton-line:last-child { width: 60%; }

/* ============================================================================
   9. SECTION RHYTHM — consistent vertical cadence across every page.
   ========================================================================= */
.section        { margin-bottom: var(--s-7); }
.section-header { margin-bottom: var(--s-4); }
.section-title  {
  font-family: var(--font-heading);
  font-size: var(--t-lg);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--s-1) 0;
}
.section-note {
  font-size: var(--t-sm);
  color: var(--text-muted);
  margin: 0;
}
/* Small caps label — Bauhaus signage, used for module names. */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ============================================================================
   10. RESPECT — motion is a preference, not a decision we make for the user.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .de-thread { animation: none; }
}

/* Smooth, unhurried scrolling for everyone else. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}