/* ════════════════════════════════════════════════════════════════════════════
   ACADEMIA VOCEA URȘILOR — scoped module stylesheet
   Program educațional dezvoltat de Alleanza S.A.M. – Speranza Animali e Milieu

   Design position
   ---------------
   The Academy belongs to the site's existing "Emerald Reserve" identity
   (deep forest black, emerald, jade glass, warm gold) and inherits its
   typography stack — Syne for display, Inter for body, JetBrains Mono for
   utility, Playfair Display italic used once, for the Guardian's Lesson.
   What is new here is the SIGNATURE: the method rail. Observare → Analiză →
   Prevenție is drawn as a three-station instrument rail with a hairline
   spine, and that same rail motif recurs at small scale as the case-study
   step index. It encodes a real sequence, so the numbering is information,
   not decoration.

   LAYERING CONTRACT (see §"Do not fix stacking with z-index: 999999")
   ------------------------------------------------------------------
   The site header owns z-index 2500 and its dropdowns 5000. Nothing in this
   file may compete with them. The Academy uses a small, documented scale and
   never exceeds 40, and it creates no stacking context on any ancestor of
   the header:
       0  — page canvas / ambient art
       1  — section content
      10  — sticky in-page sub-navigation
      20  — floating save/progress bar
      30  — media lightbox backdrop
      40  — media lightbox content
   ════════════════════════════════════════════════════════════════════════════ */

.avu {
  /* Palette — derived from the site tokens, not invented alongside them */
  --avu-gold:      var(--lux-gold, #E2B95C);
  --avu-gold-soft: var(--lux-gold-2, #F2D48A);
  --avu-gold-deep: var(--lux-gold-deep, #9C7A2E);
  --avu-emerald:   var(--lux-emerald, #2BE39B);
  --avu-jade:      var(--lux-jade, #35D9B8);
  --avu-ink:       var(--lux-ink, #EDF7F0);
  --avu-ink-2:     var(--lux-ink-2, #A5C2B0);
  --avu-ink-3:     var(--lux-ink-3, #6D8E7B);
  --avu-surface:   rgba(10, 29, 19, 0.62);
  --avu-surface-2: rgba(6, 21, 14, 0.78);
  --avu-line:      rgba(226, 185, 92, 0.20);
  --avu-line-soft: rgba(255, 255, 255, 0.07);

  /* Spacing rhythm — one scale, used everywhere, no one-off margins */
  --avu-s1: .4rem;  --avu-s2: .75rem; --avu-s3: 1.15rem;
  --avu-s4: 1.75rem; --avu-s5: 2.6rem; --avu-s6: 4rem;
  --avu-radius: 18px;
  --avu-radius-sm: 12px;

  --avu-shadow: 0 22px 60px rgba(0, 0, 0, .38);
  --avu-shadow-lift: 0 30px 80px rgba(0, 0, 0, .46), 0 0 46px rgba(226, 185, 92, .07);

  color: var(--avu-ink);
}

.avu-main {
  padding-top: calc(var(--header-h, 74px) + 2rem);
  padding-bottom: 5rem;
  position: relative;
  z-index: 1;
}

.avu-wrap {
  width: min(1180px, calc(100% - 34px));
  margin-inline: auto;
}

/* Editorial measure — long-form Academy prose never runs wider than this */
.avu-prose { max-width: 68ch; }
.avu-prose p { margin: 0 0 var(--avu-s3); line-height: 1.72; color: var(--avu-ink-2); }
.avu-prose p:last-child { margin-bottom: 0; }
.avu-prose strong { color: var(--avu-ink); font-weight: 600; }

/* ── Type ─────────────────────────────────────────────────────────────── */

.avu-eyebrow {
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--avu-gold);
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0;
}
.avu-eyebrow::before {
  content: ''; width: 26px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--avu-gold), transparent);
}

.avu-h1 {
  font-family: var(--f-display, 'Syne', sans-serif);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.02;
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  margin: var(--avu-s3) 0 var(--avu-s2);
  text-wrap: balance;
}
.avu-h2 {
  font-family: var(--f-display, 'Syne', sans-serif);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.12;
  font-size: clamp(1.35rem, 3vw, 2rem);
  margin: 0;
  text-wrap: balance;
}
.avu-h3 {
  font-family: var(--f-display, 'Syne', sans-serif);
  font-weight: 700; font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  margin: 0 0 var(--avu-s1); line-height: 1.25;
}
.avu-lede {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.62; color: var(--avu-ink-2); max-width: 62ch;
  margin: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.avu-hero { position: relative; padding: var(--avu-s4) 0 var(--avu-s5); }
.avu-hero-inner { position: relative; }
.avu-hero-media {
  margin-top: var(--avu-s4);
  border-radius: var(--avu-radius);
  overflow: hidden;
  border: 1px solid var(--avu-line);
  aspect-ratio: 21 / 9;
  background: var(--avu-surface-2);
}
.avu-hero-media img,
.avu-hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.avu-slogan {
  font-family: var(--f-display, 'Syne', sans-serif);
  font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  color: var(--avu-gold-soft); margin: 0 0 var(--avu-s2); line-height: 1.35;
  max-width: 24ch;
}
.avu-methodline {
  font-family: var(--f-mono, monospace);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--avu-emerald); margin: 0 0 var(--avu-s4);
}

.avu-actions { display: flex; flex-wrap: wrap; gap: var(--avu-s2); }

.avu-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-body, 'Inter', sans-serif);
  font-size: .88rem; font-weight: 600; line-height: 1;
  padding: .85em 1.4em; border-radius: 999px;
  border: 1px solid var(--avu-line);
  background: rgba(226, 185, 92, .07);
  color: var(--avu-gold-soft);
  cursor: pointer; text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  min-height: 44px;  /* touch target floor */
}
.avu-btn:hover { border-color: rgba(226, 185, 92, .48); background: rgba(226, 185, 92, .13); }
.avu-btn:active { transform: translateY(1px); }
.avu-btn--primary {
  background: linear-gradient(135deg, var(--avu-gold), var(--avu-gold-deep));
  color: #17110A; border-color: transparent; font-weight: 700;
}
.avu-btn--primary:hover { background: linear-gradient(135deg, var(--avu-gold-soft), var(--avu-gold)); }
.avu-btn--quiet { background: transparent; color: var(--avu-ink-2); border-color: var(--avu-line-soft); }
.avu-btn--quiet:hover { color: var(--avu-ink); border-color: rgba(255, 255, 255, .2); }
.avu-btn[disabled] { opacity: .45; cursor: not-allowed; }

.avu :focus-visible {
  outline: 2px solid var(--avu-gold-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── SIGNATURE: the method rail ───────────────────────────────────────── */

.avu-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--avu-s4);
  margin-top: var(--avu-s5);
  padding-top: var(--avu-s4);
}
/* the spine: one hairline that physically connects the three stations */
.avu-rail::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--avu-gold) 18%, var(--avu-emerald) 82%, transparent);
  opacity: .55;
}
.avu-station { position: relative; padding-top: var(--avu-s3); }
.avu-station::before {
  content: '';
  position: absolute; top: calc(var(--avu-s4) * -1 - 5px); left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--avu-gold);
  box-shadow: 0 0 0 5px rgba(226, 185, 92, .13);
}
.avu-station:nth-child(2)::before { background: var(--avu-jade); box-shadow: 0 0 0 5px rgba(53, 217, 184, .13); }
.avu-station:nth-child(3)::before { background: var(--avu-emerald); box-shadow: 0 0 0 5px rgba(43, 227, 155, .13); }
.avu-station-idx {
  font-family: var(--f-mono, monospace);
  font-size: .62rem; letter-spacing: .2em; color: var(--avu-ink-3);
  display: block; margin-bottom: var(--avu-s1);
}
.avu-station p { margin: 0; color: var(--avu-ink-2); line-height: 1.6; font-size: .93rem; }

/* ── Sections ─────────────────────────────────────────────────────────── */

.avu-section { margin-top: var(--avu-s6); }
.avu-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--avu-s3); flex-wrap: wrap; margin-bottom: var(--avu-s4);
}
.avu-section-head p { margin: var(--avu-s1) 0 0; color: var(--avu-ink-3); font-size: .88rem; max-width: 58ch; line-height: 1.55; }

.avu-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--avu-s5);
  align-items: start;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.avu-card {
  position: relative;
  background: linear-gradient(180deg, var(--avu-surface), var(--avu-surface-2));
  border: 1px solid var(--avu-line-soft);
  border-radius: var(--avu-radius);
  padding: var(--avu-s4);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.avu-card::before {
  content: ''; position: absolute; top: 0; left: var(--avu-s4); right: var(--avu-s4); height: 1px;
  background: linear-gradient(90deg, transparent, var(--avu-line), transparent);
}
a.avu-card { text-decoration: none; color: inherit; display: block; }
a.avu-card:hover, .avu-card--hover:hover {
  border-color: rgba(226, 185, 92, .32);
  box-shadow: var(--avu-shadow-lift);
  transform: translateY(-2px);
}

.avu-grid { display: grid; gap: var(--avu-s3); }
.avu-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.avu-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* level card */
.avu-level-num {
  font-family: var(--f-mono, monospace);
  font-size: .68rem; letter-spacing: .2em; color: var(--avu-gold);
  text-transform: uppercase;
}
.avu-level-sub {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  color: var(--avu-gold-soft); font-size: 1rem; margin: var(--avu-s1) 0 var(--avu-s2);
}

/* ── Badges & statuses (never colour-only) ────────────────────────────── */

.avu-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-mono, monospace);
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .42em .8em; border-radius: 999px;
  border: 1px solid var(--avu-line-soft); background: rgba(255, 255, 255, .03);
  color: var(--avu-ink-2);
}
.avu-badge::before { content: '•'; font-size: .8em; line-height: 1; }
.avu-badge--open    { border-color: rgba(43, 227, 155, .38); color: var(--avu-emerald); }
.avu-badge--open::before { content: '▶'; }
.avu-badge--closed  { border-color: rgba(226, 185, 92, .34); color: var(--avu-gold-soft); }
.avu-badge--closed::before { content: '■'; }
.avu-badge--soon    { border-color: rgba(255, 255, 255, .14); color: var(--avu-ink-3); }
.avu-badge--soon::before { content: '◷'; }
.avu-badge--report  { border-color: rgba(53, 217, 184, .34); color: var(--avu-jade); }
.avu-badge--report::before { content: '✓'; }

/* ── Principles ───────────────────────────────────────────────────────── */

.avu-principles { list-style: none; margin: 0; padding: 0; }
.avu-principles li {
  display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline;
  gap: var(--avu-s2);
  padding: var(--avu-s3) 0;
  border-bottom: 1px solid var(--avu-line-soft);
  color: var(--avu-ink);
  line-height: 1.5;
}
.avu-principles li:last-child { border-bottom: 0; }
.avu-principles li::before {
  content: counter(avu-p, decimal-leading-zero);
  counter-increment: avu-p;
  font-family: var(--f-mono, monospace); font-size: .68rem;
  color: var(--avu-gold); letter-spacing: .08em;
}
.avu-principles { counter-reset: avu-p; }

/* ── Steps (how it works) ─────────────────────────────────────────────── */

.avu-steps { counter-reset: avu-step; display: grid; gap: var(--avu-s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.avu-step { position: relative; padding-left: 3rem; }
.avu-step::before {
  counter-increment: avu-step;
  content: counter(avu-step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 1px solid var(--avu-line); border-radius: 10px;
  font-family: var(--f-mono, monospace); font-size: .82rem; color: var(--avu-gold);
  background: rgba(226, 185, 92, .05);
}
.avu-step p { margin: var(--avu-s1) 0 0; color: var(--avu-ink-2); font-size: .9rem; line-height: 1.6; }

/* ── Legal note & academy sub-footer ──────────────────────────────────── */

.avu-legal {
  margin-top: var(--avu-s6);
  border-left: 2px solid var(--avu-line);
  padding: var(--avu-s2) 0 var(--avu-s2) var(--avu-s3);
  color: var(--avu-ink-3);
  font-size: .8rem; line-height: 1.62; max-width: 78ch;
}
.avu-subfooter {
  margin-top: var(--avu-s5);
  padding: var(--avu-s4) 0 0;
  border-top: 1px solid var(--avu-line-soft);
  color: var(--avu-ink-3); font-size: .84rem; line-height: 1.65; max-width: 82ch;
}
.avu-subfooter strong { color: var(--avu-gold-soft); font-weight: 600; }

/* ── Breadcrumbs & in-page nav ────────────────────────────────────────── */

.avu-crumbs {
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  font-family: var(--f-mono, monospace); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--avu-ink-3);
  margin-bottom: var(--avu-s3);
}
.avu-crumbs a { color: var(--avu-ink-2); text-decoration: none; }
.avu-crumbs a:hover { color: var(--avu-gold-soft); }
.avu-crumbs span[aria-hidden] { opacity: .45; }

.avu-subnav {
  position: sticky; top: calc(var(--header-h, 74px) + 8px);
  z-index: 10;                     /* layering contract: below header (2500) */
  display: flex; gap: .35rem; overflow-x: auto;
  padding: .4rem; margin-bottom: var(--avu-s4);
  background: rgba(4, 13, 11, .9);
  border: 1px solid var(--avu-line-soft); border-radius: 999px;
  scrollbar-width: none;
}
.avu-subnav::-webkit-scrollbar { display: none; }
.avu-subnav a {
  flex: none; padding: .55em 1em; border-radius: 999px;
  font-size: .78rem; color: var(--avu-ink-2); text-decoration: none; white-space: nowrap;
  min-height: 38px; display: inline-flex; align-items: center;
}
.avu-subnav a:hover { color: var(--avu-ink); background: rgba(255, 255, 255, .05); }
.avu-subnav a[aria-current="true"] { background: rgba(226, 185, 92, .14); color: var(--avu-gold-soft); }

/* ── Case study ───────────────────────────────────────────────────────── */

.avu-case-meta { display: flex; flex-wrap: wrap; gap: var(--avu-s1); margin-top: var(--avu-s3); }

.avu-media { border-radius: var(--avu-radius); overflow: hidden; border: 1px solid var(--avu-line-soft); background: var(--avu-surface-2); }
.avu-media img, .avu-media video { display: block; width: 100%; height: auto; }
.avu-gallery { display: grid; gap: var(--avu-s2); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: var(--avu-s3); }
.avu-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--avu-radius-sm); border: 1px solid var(--avu-line-soft); }

.avu-instructions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--avu-s2); }
.avu-instructions li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--avu-s2);
  color: var(--avu-ink-2); line-height: 1.55; font-size: .93rem;
}
.avu-instructions li::before { content: '→'; color: var(--avu-gold); }

/* questionnaire */
.avu-question { border-top: 1px solid var(--avu-line-soft); padding: var(--avu-s4) 0; }
.avu-question:first-of-type { border-top: 0; padding-top: 0; }
.avu-question-idx {
  font-family: var(--f-mono, monospace); font-size: .62rem;
  letter-spacing: .18em; color: var(--avu-gold); text-transform: uppercase;
}
.avu-question-prompt { font-family: var(--f-display, sans-serif); font-weight: 600; font-size: 1.06rem; margin: var(--avu-s1) 0 var(--avu-s2); line-height: 1.35; }
.avu-question-help { color: var(--avu-ink-3); font-size: .82rem; margin: 0 0 var(--avu-s3); line-height: 1.55; }
.avu-required { color: var(--avu-gold); margin-left: .2rem; }

.avu-options { display: grid; gap: .55rem; margin: 0; padding: 0; border: 0; }
.avu-option {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem 1rem; border-radius: var(--avu-radius-sm);
  border: 1px solid var(--avu-line-soft); background: rgba(255, 255, 255, .02);
  cursor: pointer; transition: border-color .18s ease, background .18s ease;
  min-height: 44px;
}
.avu-option:hover { border-color: rgba(226, 185, 92, .3); background: rgba(226, 185, 92, .05); }
.avu-option input { margin-top: .18rem; accent-color: var(--avu-gold); width: 18px; height: 18px; flex: none; }
.avu-option span { line-height: 1.45; font-size: .93rem; }
.avu-option:has(input:checked) { border-color: rgba(226, 185, 92, .5); background: rgba(226, 185, 92, .09); }

.avu-input {
  width: 100%; padding: .85rem 1rem; border-radius: var(--avu-radius-sm);
  border: 1px solid var(--avu-line-soft); background: rgba(255, 255, 255, .03);
  color: var(--avu-ink); font-family: inherit; font-size: .93rem; line-height: 1.55;
  resize: vertical;
}
.avu-input:focus { border-color: rgba(226, 185, 92, .45); }
.avu-field-error { color: #ff9a8a; font-size: .8rem; margin: var(--avu-s1) 0 0; }
.avu-question[data-invalid="true"] .avu-options,
.avu-question[data-invalid="true"] .avu-input { box-shadow: 0 0 0 1px rgba(255, 120, 100, .5); border-radius: var(--avu-radius-sm); }

/* risk selector — meaning is carried by label + glyph + bar count, never by
   colour alone, so it stays readable for colour-blind users and in mono print */
.avu-risk { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.avu-risk-opt {
  display: grid; gap: .45rem; justify-items: start;
  padding: .95rem 1rem; border-radius: var(--avu-radius-sm);
  border: 1px solid var(--avu-line-soft); background: rgba(255, 255, 255, .02);
  cursor: pointer; min-height: 44px;
  transition: border-color .18s ease, background .18s ease;
}
.avu-risk-opt:hover { border-color: rgba(226, 185, 92, .3); }
.avu-risk-opt:has(input:checked) { border-color: rgba(226, 185, 92, .55); background: rgba(226, 185, 92, .09); }
.avu-risk-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.avu-risk-bars { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.avu-risk-bars i { width: 7px; background: rgba(255, 255, 255, .13); border-radius: 2px; display: block; }
.avu-risk-bars i:nth-child(1) { height: 30%; }
.avu-risk-bars i:nth-child(2) { height: 52%; }
.avu-risk-bars i:nth-child(3) { height: 76%; }
.avu-risk-bars i:nth-child(4) { height: 100%; }
.avu-risk-opt[data-level="1"] .avu-risk-bars i:nth-child(-n+1),
.avu-risk-opt[data-level="2"] .avu-risk-bars i:nth-child(-n+2),
.avu-risk-opt[data-level="3"] .avu-risk-bars i:nth-child(-n+3),
.avu-risk-opt[data-level="4"] .avu-risk-bars i:nth-child(-n+4) { background: var(--avu-gold); }
.avu-risk-label { font-weight: 600; font-size: .95rem; }
.avu-risk-glyph { font-family: var(--f-mono, monospace); font-size: .6rem; letter-spacing: .12em; color: var(--avu-ink-3); text-transform: uppercase; }

/* submit bar */
.avu-submitbar {
  /* `--avu-bottom-offset` is published by academy.js from the measured height
     of the bottom navigation and the cookie banner, so the submit control is
     never buried under fixed chrome on a phone. */
  position: sticky; bottom: var(--avu-bottom-offset, 0px); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--avu-s3);
  margin-top: var(--avu-s4); padding: var(--avu-s3);
  background: rgba(4, 13, 11, .94);
  border: 1px solid var(--avu-line-soft); border-radius: var(--avu-radius);
  backdrop-filter: blur(14px);
}
.avu-submitbar p { margin: 0; color: var(--avu-ink-3); font-size: .82rem; }

/* self-check */
.avu-check { display: grid; gap: var(--avu-s3); }
.avu-check-row {
  display: grid; gap: var(--avu-s2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: var(--avu-s3); border-radius: var(--avu-radius-sm);
  border: 1px solid var(--avu-line-soft); background: rgba(255, 255, 255, .02);
}
.avu-check-label { font-family: var(--f-mono, monospace); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--avu-ink-3); display: block; margin-bottom: .3rem; }
.avu-check-value { color: var(--avu-ink); font-size: .93rem; line-height: 1.55; }
.avu-verdict { font-family: var(--f-mono, monospace); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.avu-verdict--match { color: var(--avu-emerald); }
.avu-verdict--differs { color: var(--avu-gold-soft); }
.avu-verdict--open { color: var(--avu-ink-3); }

/* guardian lesson — the single Playfair moment in the module */
.avu-guardian {
  margin-top: var(--avu-s5);
  padding: var(--avu-s5);
  border: 1px solid var(--avu-line);
  border-radius: var(--avu-radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(226, 185, 92, .10), transparent 62%),
    linear-gradient(180deg, var(--avu-surface), var(--avu-surface-2));
}
.avu-guardian-kicker { font-family: var(--f-mono, monospace); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--avu-gold); }
.avu-guardian blockquote {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem); line-height: 1.5;
  color: var(--avu-ink); margin: var(--avu-s3) 0 0; max-width: 46ch;
}
.avu-guardian blockquote p { margin: 0 0 var(--avu-s2); }
.avu-guardian blockquote p:last-child { margin-bottom: 0; }

/* ── Charts (report distribution) ─────────────────────────────────────── */

.avu-dist { display: grid; gap: var(--avu-s2); margin-top: var(--avu-s3); }
.avu-dist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; }
.avu-dist-label { font-size: .88rem; color: var(--avu-ink-2); }
.avu-dist-num { font-family: var(--f-mono, monospace); font-size: .78rem; color: var(--avu-gold-soft); white-space: nowrap; }
.avu-dist-track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.avu-dist-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--avu-gold-deep), var(--avu-gold)); }
.avu-dist-row--official .avu-dist-fill { background: linear-gradient(90deg, var(--avu-emerald), var(--avu-jade)); }

/* ── Empty / error states ─────────────────────────────────────────────── */

.avu-empty {
  border: 1px dashed var(--avu-line-soft); border-radius: var(--avu-radius);
  padding: var(--avu-s5); text-align: left; color: var(--avu-ink-3);
  font-size: .9rem; line-height: 1.6;
}
.avu-empty strong { display: block; color: var(--avu-ink-2); font-weight: 600; margin-bottom: .35rem; }
.avu-notice {
  border: 1px solid var(--avu-line); border-radius: var(--avu-radius-sm);
  padding: var(--avu-s3); background: rgba(226, 185, 92, .06);
  color: var(--avu-ink-2); font-size: .88rem; line-height: 1.6;
}
.avu-notice--error { border-color: rgba(255, 120, 100, .4); background: rgba(255, 120, 100, .07); }

/* progress */
.avu-progress { display: grid; gap: var(--avu-s2); }
.avu-progress-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.avu-progress-fill { height: 100%; background: linear-gradient(90deg, var(--avu-emerald), var(--avu-jade)); }
.avu-progress-meta { display: flex; justify-content: space-between; gap: var(--avu-s2); font-family: var(--f-mono, monospace); font-size: .68rem; color: var(--avu-ink-3); letter-spacing: .08em; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .avu-split { grid-template-columns: 1fr; gap: var(--avu-s4); }
  .avu-rail { grid-template-columns: 1fr; gap: var(--avu-s3); padding-top: var(--avu-s3); }
  .avu-rail::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--avu-gold) 12%, var(--avu-emerald) 88%, transparent); }
  .avu-station { padding-left: var(--avu-s4); padding-top: 0; }
  .avu-station::before { top: .35rem; left: 0; }
}

@media (max-width: 620px) {
  .avu-main { padding-top: calc(var(--header-h, 74px) + 1.2rem); }
  .avu-section { margin-top: var(--avu-s5); }
  .avu-card { padding: var(--avu-s3); }
  .avu-card::before { left: var(--avu-s3); right: var(--avu-s3); }
  .avu-hero-media { aspect-ratio: 16 / 10; }
  .avu-submitbar { flex-direction: column; align-items: stretch; }
  .avu-submitbar .avu-btn { width: 100%; justify-content: center; }
  .avu-guardian { padding: var(--avu-s4); }
  .avu-check-row { grid-template-columns: 1fr; }
}

/* Nothing in this module may overflow the viewport horizontally. */
.avu, .avu * { min-width: 0; }
.avu img, .avu video, .avu table { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .avu *, .avu *::before, .avu *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Print / high-contrast safety: risk meaning still readable without colour. */
@media print {
  .avu-subnav, .avu-submitbar { display: none; }
  .avu { color: #000; }
}

/* Visually-hidden helper — fieldset legends stay available to screen readers
   while the visible prompt above them carries the design. */
.avu .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Touch-target floor ───────────────────────────────────────────────────
   Breadcrumb links and inline document chips are small by design, but they
   are still interactive, so they get enough vertical padding to clear the
   30px floor the audit enforces on every viewport. */
.avu-crumbs a,
.avu-crumbs span[aria-current] {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 .1rem;
}
a.avu-badge {
  min-height: 32px;
  text-decoration: none;
}
.avu-subnav a { min-height: 38px; }

/* ── Scale control ────────────────────────────────────────────────────────
   A real range input bound to the configured min / max / step. The current
   value is printed next to it, so the answer is never conveyed by slider
   position alone. */
.avu-scale {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--avu-s3);
}
.avu-scale-input {
  width: 100%;
  accent-color: var(--avu-gold);
  height: 30px;
  cursor: pointer;
}
.avu-scale-input:focus-visible { outline: 2px solid var(--avu-gold-soft); outline-offset: 4px; }
.avu-scale-value {
  font-family: var(--f-mono, monospace);
  font-size: 1.15rem;
  color: var(--avu-gold-soft);
  min-width: 3ch;
  text-align: center;
  padding: .35rem .6rem;
  border: 1px solid var(--avu-line);
  border-radius: var(--avu-radius-sm);
}
.avu-scale-ends {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--avu-s2);
  font-size: .78rem;
  color: var(--avu-ink-3);
}

/* ── Ordered / ranking control ────────────────────────────────────────────
   Ranking is done with explicit move buttons rather than drag-and-drop only,
   so it works identically with a keyboard, a screen reader and a thumb. */
.avu-ordered { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: none; }
.avu-ordered-item {
  display: grid;
  grid-template-columns: 2.1rem 1fr auto;
  align-items: center;
  gap: var(--avu-s2);
  padding: .7rem .9rem;
  border: 1px solid var(--avu-line-soft);
  border-radius: var(--avu-radius-sm);
  background: rgba(255, 255, 255, .02);
  min-height: 48px;
}
.avu-ordered-rank {
  font-family: var(--f-mono, monospace);
  font-size: .8rem;
  color: var(--avu-gold);
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--avu-line);
  border-radius: 8px;
}
.avu-ordered-label { line-height: 1.4; font-size: .93rem; }
.avu-ordered-controls { display: flex; gap: .3rem; }
.avu-ordered-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--avu-line-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--avu-ink-2);
  cursor: pointer;
  font-size: 1rem;
}
.avu-ordered-btn:hover:not([disabled]) { border-color: rgba(226,185,92,.4); color: var(--avu-gold-soft); }
.avu-ordered-btn[disabled] { opacity: .28; cursor: not-allowed; }

@media (max-width: 480px) {
  .avu-ordered-item { grid-template-columns: 1.8rem 1fr auto; padding: .6rem .7rem; }
  .avu-ordered-label { font-size: .88rem; }
}

/* ── Certificate ──────────────────────────────────────────────────────────
   A real document the participant can read on screen and print. No PDF engine
   is bundled: the print rules below turn this into a clean single page through
   the browser's own "Save as PDF". */
.avu-certificate {
  position: relative;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.4rem, 5vw, 4rem);
  border: 1px solid var(--avu-line);
  border-radius: var(--avu-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(226, 185, 92, .10), transparent 60%),
    linear-gradient(180deg, var(--avu-surface), var(--avu-surface-2));
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.avu-cert-program { font-family: var(--f-mono, monospace); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--avu-gold); margin: 0; }
.avu-cert-title { font-family: var(--f-display, sans-serif); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.4rem); margin: .8rem 0 .3rem; letter-spacing: -.01em; }
.avu-cert-kicker { font-family: var(--f-mono, monospace); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--avu-ink-3); margin: 0 0 var(--avu-s5); }
.avu-cert-name {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(1.6rem, 5vw, 2.8rem); color: var(--avu-gold-soft);
  margin: 0 0 var(--avu-s2); line-height: 1.2;
}
.avu-cert-level { font-size: 1.02rem; color: var(--avu-ink-2); margin: 0 0 var(--avu-s5); }
.avu-cert-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--avu-s4);
  margin: 0 0 var(--avu-s5); padding-top: var(--avu-s4);
  border-top: 1px solid var(--avu-line-soft);
}
.avu-cert-meta dt { font-family: var(--f-mono, monospace); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--avu-ink-3); }
.avu-cert-meta dd { margin: .3rem 0 0; font-size: .92rem; color: var(--avu-ink); }
.avu-cert-legal { font-size: .74rem; line-height: 1.6; color: var(--avu-ink-3); max-width: 62ch; margin-inline: auto; }

@media print {
  .avu-noprint, .site-header, .bottom-nav, .mobile-menu, .avu-crumbs, .avu-subfooter, .avu-legal { display: none !important; }
  .avu-main { padding: 0 !important; }
  .avu-certificate {
    border: 1px solid #b9975b; background: #fff; color: #17110A;
    box-shadow: none; page-break-inside: avoid;
  }
  .avu-cert-title, .avu-cert-meta dd { color: #17110A; }
  .avu-cert-name { color: #8a6d29; }
  .avu-cert-program, .avu-cert-kicker, .avu-cert-meta dt, .avu-cert-legal, .avu-cert-level { color: #4a4a44; }
}

/* ── Portrait case material ───────────────────────────────────────────────
   The Transfăgărășan recording is a 698×1280 portrait clip. Stretched to the
   content width it would be over 1500px tall on a laptop and push the
   questionnaire far below the fold, so it is framed instead: capped height,
   centred, letterboxed against the surface colour. The aspect ratio is never
   distorted — `object-fit: contain` keeps the frame intact. */
.avu-media--video {
  margin: 0;
  display: grid;
  justify-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(226, 185, 92, .06), transparent 60%),
    var(--avu-surface-2);
  padding: var(--avu-s3);
}
.avu-media--video video {
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 620px);
  height: auto;
  border-radius: var(--avu-radius-sm);
  background: #000;
  object-fit: contain;
  display: block;
}
.avu-media-caption {
  margin-top: var(--avu-s3);
  color: var(--avu-ink-3);
  font-size: .82rem;
  line-height: 1.6;
  max-width: 62ch;
  text-align: center;
}

@media (max-width: 620px) {
  .avu-media--video { padding: var(--avu-s2); }
  /* On a phone the clip is already the natural shape of the screen, so it may
     use more height — but never so much that the submit bar leaves the fold. */
  .avu-media--video video { max-height: min(62vh, 560px); }
  .avu-media-caption { font-size: .78rem; text-align: left; }
}

/* ── Participant identity + private submission history ──────────────────── */
.avu-participant-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr);
  gap: var(--avu-s3);
  align-items: end;
  margin: 0 0 var(--avu-s4);
  padding: var(--avu-s3);
  border: 1px solid rgba(226, 185, 92, .22);
  border-radius: var(--avu-radius-sm);
  background: linear-gradient(135deg, rgba(226, 185, 92, .07), rgba(255, 255, 255, .015));
}
.avu-participant-identity .avu-question-prompt { display: block; margin-bottom: .35rem; }
.avu-participant-identity .avu-question-help { margin-bottom: 0; }
.avu-participant-identity .avu-field-error { grid-column: 2; }
.avu-participant-identity .avu-input[aria-invalid="true"] {
  border-color: rgba(255, 120, 100, .68);
  box-shadow: 0 0 0 1px rgba(255, 120, 100, .35);
}

.avu-submission-review {
  display: grid;
  gap: var(--avu-s3);
  padding: var(--avu-s3);
  border: 1px solid var(--avu-line-soft);
  border-radius: var(--avu-radius);
  background: rgba(255, 255, 255, .018);
}
.avu-submission-review--compact { padding: var(--avu-s2); border: 0; border-radius: 0; background: transparent; }
.avu-submission-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--avu-s2);
}
.avu-submission-summary > div {
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid var(--avu-line-soft);
  border-radius: var(--avu-radius-sm);
  background: rgba(255, 255, 255, .02);
}
.avu-submission-summary strong { display: block; overflow-wrap: anywhere; font-size: .94rem; }
.avu-response-list { display: grid; gap: var(--avu-s2); }
.avu-response-row {
  min-width: 0;
  padding: var(--avu-s3);
  border-top: 1px solid var(--avu-line-soft);
}
.avu-response-row:first-child { border-top: 0; }
.avu-response-row h4 {
  margin: .35rem 0 .75rem;
  color: var(--avu-ink);
  font-family: var(--f-display, sans-serif);
  font-size: 1rem;
  line-height: 1.4;
}
.avu-response-row p { margin: 0; }
.avu-response-row .avu-check-value { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

.avu-history-list { display: grid; gap: var(--avu-s2); }
.avu-history-item {
  overflow: hidden;
  border: 1px solid var(--avu-line-soft);
  border-radius: var(--avu-radius-sm);
  background: rgba(255, 255, 255, .018);
}
.avu-history-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--avu-s2);
  min-height: 54px;
  padding: .8rem 1rem;
  cursor: pointer;
  list-style: none;
}
.avu-history-item summary::-webkit-details-marker { display: none; }
.avu-history-item summary span:first-child { min-width: 0; display: grid; gap: .2rem; }
.avu-history-item summary strong { overflow-wrap: anywhere; }
.avu-history-item summary small { color: var(--avu-ink-3); }
.avu-history-item[open] summary { border-bottom: 1px solid var(--avu-line-soft); }

@media (max-width: 720px) {
  .avu-participant-identity { grid-template-columns: 1fr; align-items: stretch; padding: var(--avu-s2); }
  .avu-participant-identity .avu-field-error { grid-column: 1; }
  .avu-submission-summary { grid-template-columns: 1fr 1fr; }
  .avu-history-item summary { align-items: flex-start; }
}

@media (max-width: 430px) {
  .avu-submission-summary { grid-template-columns: 1fr; }
  .avu-history-item summary { flex-direction: column; }
  .avu-history-item summary .avu-badge { align-self: flex-start; }
}

/* ── Private participant identity: name + Gmail ──────────────────────────── */
.avu-participant-identity {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.avu-identity-intro { min-width: 0; }
.avu-identity-intro .avu-question-help { margin: .35rem 0 0; max-width: 72ch; }
.avu-identity-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--avu-s3);
  min-width: 0;
}
.avu-identity-field { min-width: 0; }
.avu-identity-field .avu-input { width: 100%; min-width: 0; box-sizing: border-box; }
.avu-participant-identity .avu-field-error { grid-column: auto; }
.avu-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid rgba(113, 191, 151, .18);
  border-radius: 12px;
  background: rgba(31, 105, 72, .09);
  color: var(--avu-ink-2);
  font-size: .82rem;
  line-height: 1.5;
}
.avu-privacy-note > span:last-child { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .avu-identity-fields { grid-template-columns: 1fr; }
}