/*
 * Tokenii de design CorLab EDU, extrasi din docs/design/artboards/Sistem.dc.html.
 * Sursa unica pentru culori, spatiere, tipografie, raze si umbre — nu se
 * redefinesc valori brute in componente, doar se refera acesti token.
 *
 * Rosu / galben / verde exista aici ca tokeni (sistemul vizual le defineste
 * si undeva trebuie sa traiasca o singura data), dar nicio componenta din
 * libs/ui nu le foloseste. Sunt rezervate exclusiv notarii (CLAUDE.md) — un
 * eventual afisaj de notare (in afara acestui task) le foloseste direct de
 * aici, condus de pragurile din libs/domain, fara sa treaca prin Button/Tag.
 */

:root {
  /* --- culori neutre --- */
  --clb-ink: #000000; /* text si suprafata neagra a actiunii principale */
  --clb-ink-2: #0a0a0a; /* hover/active pe negru */
  --clb-ink-3: #1f1f1f; /* nav activ, suprafete inchise secundare */
  --clb-ground: #fafafa; /* fundalul paginii */
  --clb-surface: #ffffff; /* carduri, inputuri, dialoguri */
  --clb-line: #ebebeb; /* borduri si separatoare discrete */
  /* Borduri pe controale interactive.
     #e1e1e1 dadea 1,31:1 pe alb si 1,25:1 pe fundal — sub pragul de 3:1 pe care
     WCAG 1.4.11 il cere componentelor de interfata. Un chenar care nu se vede
     nu e chenar, iar tokenul asta desena chiar campurile din ecranele
     studentului: codul de intrare, numele, variantele de raspuns.
     #868686 da 3,64:1 pe alb si 3,49:1 pe fundal. Tot gri, nu o culoare noua. */
  --clb-line-2: #868686;
  --clb-gray-100: #f2f2f2; /* fundal tag neutru, hover pe buton quiet */

  --clb-text: #000000;
  --clb-muted: #666666; /* text secundar */
  /* text tertiar, placeholder — #8f8f8f dadea doar 3.1:1 pe --clb-ground
   * (sub minimul WCAG AA de 4.5:1 pentru text normal, T105); #707070 trece
   * 4.74:1 pe ground si 4.95:1 pe alb, cazul cel mai defavorabil masurat. */
  --clb-faint: #707070;

  /* --- accent (link-uri, marcaj AI, stare activa — nu e rezervat notarii) --- */
  /* #0072f5 dadea 4.44:1 pe alb (sub 4.5:1, T105); #0070f0 trece 4.59:1 pe alb
   * si 4.58:1 pe negru (ecranul live al profesorului) — ambele cazuri reale. */
  --clb-accent: #0070f0;
  --clb-accent-dark: #0761d1;
  --clb-accent-bg: #f0f6ff;

  /* Tokenii de notare sunt scosi aici: vezi withoutGradingColors. */

  /* --- tipografie --- */
  --clb-font-sans: Geist, -apple-system, system-ui, sans-serif;
  --clb-font-mono: 'Geist Mono', ui-monospace, monospace;

  --clb-text-2xs: 11px; /* etichete uppercase, .lab */
  --clb-text-xs: 11.5px; /* crumb, detalii tag */
  --clb-text-sm: 12.5px; /* buton mic, detaliu muted */
  --clb-text-base: 13px; /* text de interfata implicit, tabel */
  --clb-text-md: 14px; /* corp text, h2 */
  --clb-text-lg: 15px; /* text optiune student */
  --clb-text-xl: 17px; /* h1 pagina */
  --clb-text-display: 26px; /* titluri mari, intrebare live */

  --clb-weight-regular: 400;
  --clb-weight-medium: 500;
  --clb-weight-semibold: 600;
  --clb-weight-bold: 700;

  --clb-tracking-tight: -0.025em; /* titluri */
  --clb-tracking-snug: -0.02em; /* heading, serif */
  --clb-tracking-normal: -0.01em; /* text implicit */
  --clb-tracking-wide: 0.02em; /* etichete uppercase */
  --clb-tracking-wider: 0.06em; /* "EDU" langa marca */
  --clb-tracking-widest: 0.14em; /* cod mono */

  /* --- spatiere (scara folosita in Sistem.dc.html) --- */
  --clb-space-1: 4px;
  --clb-space-2: 6px;
  --clb-space-3: 8px;
  --clb-space-4: 10px;
  --clb-space-5: 12px;
  --clb-space-6: 14px;
  --clb-space-7: 18px;
  --clb-space-8: 20px;
  --clb-space-9: 22px;

  /* --- raze --- */
  --clb-radius-sm: 6px; /* buton, input, tag */
  --clb-radius-md: 8px; /* optiune student, mark mic */
  --clb-radius-lg: 12px; /* card, modal, slide */
  --clb-radius-full: 9999px;

  /* --- inaltimi de control --- */
  --clb-control-sm: 28px;
  --clb-control-md: 32px;
  --clb-control-lg: 40px;
  --clb-control-touch: 48px; /* tinta minima pe ecranele studentului */

  /* --- umbre ---
   * Sistem.dc.html nu are un artboard de modal/overlay; singura umbra
   * documentata acolo e inelul de selectie (box-shadow 0 0 0 1px). Umbra de
   * elevatie de mai jos e inventata pentru Modal, in acelasi spirit neutru
   * (gri, fara culoare), motiv pentru care e semnalata separat in raport.
   */
  --clb-shadow-ring: 0 0 0 1px var(--clb-ink);
  --clb-shadow-focus: 0 0 0 2px var(--clb-surface), 0 0 0 4px var(--clb-accent);
  --clb-shadow-elevated:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --clb-overlay-scrim: rgba(0, 0, 0, 0.4);

  /* --- durate de tranzitie, discrete, fara animatii de "atentie" --- */
  --clb-motion-fast: 120ms;
  --clb-motion-base: 160ms;
}

/* --- baza documentului ---
 * Tokenii de mai sus nu ajuta cu nimic daca nimeni nu-i aplica. Regulile astea
 * sunt transpuse ca atare din `body{...}`, `*{...}` si `a{...}` din
 * `docs/design/artboards/Sistem.dc.html` — fara ele, pagina cade pe fontul
 * implicit al browserului (serif) si pe linkurile subliniate, adica pe exact
 * ce sistemul vizual nu e.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--clb-font-sans);
  /* Artboardul are `body{font-size:14px}`; `--clb-text-base` (13px) e marimea
   * controalelor si a tabelelor, nu a corpului de text. */
  font-size: var(--clb-text-md);
  letter-spacing: -0.01em;
  color: var(--clb-text);
  background: var(--clb-ground);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--clb-accent);
  text-decoration: none;
}

a:hover {
  color: var(--clb-accent-dark);
}

/* Butoanele si campurile nu mostenesc fontul de la `body` in niciun browser. */
button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}


/* Geist, gazduit langa pagina.
 *
 * Nu de la Google Fonts: pagina publica a unei catedre nu are de ce sa
 * trimita adresa IP a fiecarui vizitator la un tert doar ca sa se vada
 * fontul — cu atat mai putin pagina care explica unde stau datele. Trei
 * subseturi variabile, ~60 KB in total: latin, latin-ext (a, i, s, t din
 * romana si franceza) si chirilic (pagina rusa). Geist Mono vine doar cu
 * latin (geist-mono-latin.woff2): il poarta doar cifrele si numerotarea
 * sectiunilor, adica numai ASCII — orice text tradus (eticheta „live" din
 * bara panoului inclusiv, vezi .l-panel__live mai jos) trece pe fontul sans,
 * ca sa nu iasa un cuvant pe jumatate in Geist Mono si pe jumatate in fontul
 * de sistem cand are diacritice sau litere chirilice. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.lockup {
  display: inline-flex;
  align-items: center;
  /* Descriptorul sta lipit de marca, nu la distanta de cuvant — asa e in
   * blocul „Marca" din sistemul de design. */
  gap: var(--clb-space-2);
}

.descriptor {
  /* Valorile vin din design: 13px, semibold, spatiere marita. Culoarea e
   * tokenul de text tertiar, ca descriptorul sa nu concureze marca. */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--clb-faint);
  padding-left: 1px;
  white-space: nowrap;
}


/* --- baza ---------------------------------------------------------------
 * tokens.css da deja body{font-size:14px} — marimea interfetei de lucru.
 * Pagina publica se citeste, nu se opereaza, deci corpul urca la 16px si
 * masura se limiteaza la ~64 de caractere. Restul scarii ramane a produsului.
 */
:root {
  --l-measure: 64ch;
  --l-page: 1120px;
  --l-gutter: clamp(20px, 5vw, 56px);
  /* Decelerare curata, fara revenire elastica: lucrurile reale se opresc,
   * nu sar inapoi. */
  --l-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Nicio suprascriere de token aici. --clb-line-2 chiar era prea deschis
   * (1,31:1 pe alb), dar reparat local ar fi lasat aplicatia cu chenare
   * invizibile pe ecranele studentului — acelasi token deseneaza campul de cod
   * si variantele de raspuns. E reparat in libs/ui, o singura data, unde ii e
   * locul. */
}

body {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--clb-ink);
  color: var(--clb-surface);
}

:where(a, button, summary):focus-visible {
  outline: none;
  box-shadow: var(--clb-shadow-focus);
  border-radius: var(--clb-radius-sm);
}

/* Legatura de sarit peste antet: exista mereu in document, se vede doar la
 * focus din tastatura. */
.l-skip {
  position: absolute;
  left: -9999px;
  top: var(--clb-space-3);
  z-index: 10;
  background: var(--clb-ink);
  color: var(--clb-surface);
  padding: var(--clb-space-3) var(--clb-space-6);
  border-radius: var(--clb-radius-sm);
  font-weight: var(--clb-weight-medium);
}
.l-skip:focus {
  left: var(--clb-space-3);
  color: var(--clb-surface);
}

/* --- coloana paginii ---------------------------------------------------- */
.l-wrap {
  max-width: var(--l-page);
  margin-inline: auto;
  padding-inline: var(--l-gutter);
}

/* Grila de document: numarul sectiunii sta in marginea din stanga, textul
 * incepe intotdeauna de la aceeasi linie verticala. Sub 900px marginea
 * dispare si numarul urca deasupra titlului — nu se pierde, se muta. */
.l-sec {
  border-top: 1px solid var(--clb-line);
  padding-block: clamp(48px, 8vw, 96px);
}
.l-sec__grid {
  display: grid;
  gap: var(--clb-space-6) clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .l-sec__grid {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}
.l-sec__no {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--clb-tracking-wider);
  color: var(--clb-faint);
  padding-top: 0.7em;
}
.l-sec__body > * + * {
  margin-top: var(--clb-space-8);
}
/* Listele si grilele isi declara singure spatiul de deasupra (vezi .l-steps,
 * .l-claims, .l-dept): au nevoie de mai mult aer decat doua paragrafe. */

h1, h2, h3 {
  font-weight: var(--clb-weight-semibold);
  letter-spacing: var(--clb-tracking-tight);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -0.03em;
}
h3 {
  font-size: 18px;
  letter-spacing: -0.022em;
}
p {
  margin: 0;
  max-width: var(--l-measure);
  text-wrap: pretty;
}
.l-lede {
  color: var(--clb-muted);
  font-size: 17px;
}
/* Propozitia care duce o sectiune singura — „AI-ul noteaza, profesorul
 * decide". Se citeste inaintea listei de sub ea, deci e neagra si mai mare,
 * nu inca un paragraf gri. */
.l-statement {
  font-size: clamp(19px, 2.1vw, 24px);
  letter-spacing: -0.026em;
  line-height: 1.3;
  max-width: 46ch;
}

/* --- antet -------------------------------------------------------------- */
.l-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-6);
  padding-block: var(--clb-space-7);
  flex-wrap: wrap;
}
.l-head__brand {
  color: var(--clb-ink);
  display: inline-flex;
}
.l-head__right {
  display: flex;
  align-items: center;
  gap: var(--clb-space-6);
  font-size: var(--clb-text-base);
}

/* Comutatorul de limba. Nu e un meniu: cele trei limbi ramase incap in
 * antet, iar un motor de cautare le vede ca legaturi, nu ca stare de JS. */
.l-langs {
  display: flex;
  align-items: center;
  gap: var(--clb-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-langs a {
  color: var(--clb-muted);
}
.l-langs a:hover { color: var(--clb-ink); }
.l-langs [aria-current='true'] {
  color: var(--clb-ink);
  font-weight: var(--clb-weight-medium);
}

.l-quiet {
  color: var(--clb-muted);
}
.l-quiet:hover { color: var(--clb-ink); }

/* --- butoane ------------------------------------------------------------
 * Actiunea principala e negru pur, ca in produs. Accentul albastru ramane
 * pentru legaturi si stari, nu ajunge niciodata pe butonul principal. */
.l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--clb-control-touch);
  padding-inline: var(--clb-space-9);
  border-radius: var(--clb-radius-sm);
  background: var(--clb-ink);
  color: var(--clb-surface);
  font-size: 15px;
  font-weight: var(--clb-weight-medium);
  letter-spacing: -0.014em;
  border: 1px solid var(--clb-ink);
}
.l-btn:hover {
  background: var(--clb-surface);
  color: var(--clb-ink);
}
.l-btn--ghost {
  background: transparent;
  color: var(--clb-ink);
  border-color: var(--clb-line-2);
}
.l-btn--ghost:hover {
  background: var(--clb-ink);
  color: var(--clb-surface);
  border-color: var(--clb-ink);
}
.l-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-5);
}
.l-note {
  font-size: var(--clb-text-base);
  color: var(--clb-faint);
}

/* --- antetul mare ------------------------------------------------------- */
.l-hero {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  padding-block: clamp(40px, 7vw, 88px) clamp(52px, 9vw, 104px);
  align-items: start;
}
@media (min-width: 1000px) {
  .l-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  }
}
.l-hero__kicker {
  font-size: var(--clb-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--clb-tracking-wide);
  color: var(--clb-faint);
  margin-bottom: var(--clb-space-6);
}
.l-hero h1 {
  font-size: clamp(34px, 6.4vw, 58px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 15ch;
}
.l-hero__lede {
  margin-top: var(--clb-space-7);
  font-size: 17.5px;
  color: var(--clb-muted);
  max-width: 52ch;
}
.l-hero__actions {
  margin-top: clamp(24px, 3vw, 34px);
}

/* --- fragmentul de ecran ------------------------------------------------ */
.l-panel { margin: 0; }
.l-panel__frame {
  background: var(--clb-surface);
  border: 1px solid var(--clb-line);
  border-radius: var(--clb-radius-lg);
  padding: var(--clb-space-8);
}
.l-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clb-space-5);
  padding-bottom: var(--clb-space-6);
  border-bottom: 1px solid var(--clb-line);
  font-size: var(--clb-text-sm);
  color: var(--clb-faint);
}
.l-panel__live {
  display: inline-flex;
  align-items: center;
  gap: var(--clb-space-2);
  /* Sans, nu mono: eticheta e tradusa (content.demo.live) si Geist Mono n-are
   * decat subsetul latin — „în desfășurare" sau „идёт" ar cadea pe jumatate
   * pe fontul de sistem. Vezi comentariul de la @font-face, mai sus. */
  font-family: var(--clb-font-sans);
  letter-spacing: var(--clb-tracking-wide);
  text-transform: uppercase;
  font-size: var(--clb-text-2xs);
}
.l-panel__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--clb-radius-full);
  background: var(--clb-ink);
}
.l-panel__q {
  margin-top: var(--clb-space-8);
  font-size: 19px;
  font-weight: var(--clb-weight-semibold);
  letter-spacing: -0.024em;
  line-height: 1.25;
  color: var(--clb-text);
}
.l-panel__meter {
  margin-top: var(--clb-space-9);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--clb-space-5) var(--clb-space-7);
}
.l-cells {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-cell {
  width: 10px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid var(--clb-line-2);
  /* Cei care n-au raspuns inca sunt un loc gol vizibil, nu o pauza intre
   * patratele: altfel se citesc ca o greseala de spatiere. */
  background: var(--clb-line);
}
.l-cell.is-on {
  border-color: var(--clb-ink);
  background: var(--clb-ink);
}
.l-count {
  font-family: var(--clb-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--clb-text-md);
  color: var(--clb-text);
  white-space: nowrap;
}
.l-count b { font-weight: var(--clb-weight-semibold); }
.l-count__live { display: none; }
.l-count__label {
  font-family: var(--clb-font-sans);
  color: var(--clb-muted);
  margin-left: var(--clb-space-2);
}
.l-panel__pending {
  margin-top: var(--clb-space-8);
  padding-top: var(--clb-space-6);
  border-top: 1px solid var(--clb-line);
  font-size: var(--clb-text-base);
  color: var(--clb-muted);
}
.l-panel__caption {
  margin-top: var(--clb-space-5);
  font-size: var(--clb-text-sm);
  color: var(--clb-faint);
}

/* --- pasii orei --------------------------------------------------------- */
.l-steps {
  --l-steps-indent: clamp(26px, 3.4vw, 38px);
  position: relative;
  list-style: none;
  margin: clamp(28px, 3.2vw, 40px) 0 0;
  padding: 0 0 0 var(--l-steps-indent);
}
/* Linia verticala: cenusie tot drumul, cu o suprapunere de cerneala care se
 * trage in jos pe masura ce sectiunea trece prin fereastra. Miscarea asta
 * spune un singur lucru — ca pasii sunt o ordine, nu o lista. */
.l-steps::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  left: 4px;
  width: 1px;
  background: var(--clb-line);
}
.l-steps::after {
  content: '';
  position: absolute;
  inset-block: 10px;
  left: 4px;
  width: 1px;
  background: var(--clb-ink);
  transform-origin: top;
}
.l-step { position: relative; }
/* Coloana vertebrala se opreste la ultimul nod: o linie care continua sub el
 * ar promite un pas care nu exista. Se acopera cu fundalul paginii, ca sa nu
 * depinda de inaltimea ultimului paragraf. */
.l-step:last-child::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: calc(-1 * var(--l-steps-indent) - 1px);
  top: calc(0.42em + 9px);
  bottom: -40px;
  width: 11px;
  background: var(--clb-ground);
}
.l-steps::before,
.l-steps::after { z-index: 0; }
.l-step + .l-step { margin-top: clamp(28px, 3.6vw, 44px); }
/* Nodul de pe linie. Numarul pasului ar fi intrat in coliziune cu numarul
 * sectiunii din marginea din stanga — doua numerotari una langa alta se
 * citesc ca o greseala. Ordinea o spun linia si nodurile. */
.l-step::before {
  content: '';
  position: absolute;
  /* Nodul sta pe linie, iar linia e la 4px de marginea listei — deci se
   * scoate din indentarea elementului, nu se aseaza langa textul lui. */
  left: calc(-1 * var(--l-steps-indent));
  top: 0.42em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--clb-ink);
  box-shadow: 0 0 0 4px var(--clb-ground);
}
.l-step p {
  margin-top: var(--clb-space-4);
  color: var(--clb-muted);
}

/* --- enunturi ----------------------------------------------------------- */
.l-claims {
  list-style: none;
  margin: clamp(28px, 3.2vw, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: var(--l-measure);
}
.l-claims li {
  padding-block: var(--clb-space-7);
  border-top: 1px solid var(--clb-line);
  color: var(--clb-muted);
}
.l-claims li:first-child { border-top: 0; }

/* --- pentru catedra ----------------------------------------------------- */
.l-dept {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
  margin: clamp(28px, 3.2vw, 40px) 0 0;
}
@media (min-width: 760px) {
  .l-dept { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.l-dept > div { max-width: 42ch; }
.l-dept h3 {
  padding-top: var(--clb-space-5);
  border-top: 1px solid var(--clb-ink);
}
.l-dept p {
  margin-top: var(--clb-space-5);
  color: var(--clb-muted);
  font-size: 15px;
}

/* --- inchidere ---------------------------------------------------------- */
.l-close h2 { font-size: clamp(26px, 4vw, 40px); }

/* --- subsol ------------------------------------------------------------- */
.l-foot {
  border-top: 1px solid var(--clb-line);
  margin-top: 0;
  padding-block: clamp(32px, 5vw, 56px) clamp(40px, 6vw, 72px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--clb-space-7);
  font-size: var(--clb-text-base);
  color: var(--clb-faint);
}
.l-foot nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clb-space-6);
  list-style: none;
  margin: var(--clb-space-3) 0 0;
  padding: 0;
}
.l-foot__label {
  text-transform: uppercase;
  letter-spacing: var(--clb-tracking-wide);
  font-size: var(--clb-text-2xs);
}

/* --- formularul "Cere acces" (FR-080) -----------------------------------
 *
 * O singura coloana, la latimea textului. E un formular de trei campuri
 * completat o data in viata, nu un ecran de lucru: nimic nu se aseaza pe doua
 * coloane, ca sa nu existe intrebarea "care e urmatorul".
 *
 * ATENTIE la ce NU e aici: nicio culoare de stare. Refuzul nu e rosu si
 * confirmarea nu e verde — cele trei culori sunt rezervate notarii, inclusiv
 * pe pagina publica (FR-081). Se disting prin greutate, linie si asezare.
 */

/* Confirmarea sta in document de la inceput si se arata dupa trimitere.
 * "important" e aici fiindca elementele de mai jos primesc display din
 * regulile lor, iar un display: grid ar invinge atributul hidden al
 * browserului. (Fara accente grave in comentariile CSS: foaia de stil e un
 * literal sablon TypeScript, si un accent grav il inchide.) */
[hidden] { display: none !important; }

.l-ask {
  max-width: 52ch;
  padding-block: clamp(28px, 5vw, 56px) clamp(48px, 8vw, 96px);
}
.l-ask h1 {
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.l-ask .l-lede {
  margin-top: var(--clb-space-6);
  color: var(--clb-muted);
  font-size: 17px;
}
.l-ask__back {
  font-size: var(--clb-text-base);
  margin-bottom: var(--clb-space-7);
}

.l-form {
  display: grid;
  gap: var(--clb-space-8);
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--clb-ink);
}
.l-field {
  display: grid;
  gap: var(--clb-space-3);
}
.l-field label {
  font-size: var(--clb-text-base);
  font-weight: var(--clb-weight-medium);
}
/* 16px, nu 15: sub 16px, Safari pe iPhone mareste pagina la focus si o lasa
 * asa. Un formular public se completeaza de pe telefon mai des decat de pe
 * laptop. */
.l-input {
  width: 100%;
  min-height: var(--clb-control-touch);
  padding: 0 var(--clb-space-5);
  font: inherit;
  font-size: 16px;
  color: var(--clb-ink);
  background: var(--clb-surface);
  border: 1px solid var(--clb-line-2);
  border-radius: var(--clb-radius-sm);
}
.l-input:hover { border-color: var(--clb-ink-3); }
.l-input:focus-visible {
  outline: none;
  border-color: var(--clb-ink);
  box-shadow: var(--clb-shadow-focus);
}
.l-field__hint {
  font-size: var(--clb-text-base);
  color: var(--clb-faint);
}

/* Refuzul numeste ce l-a cauzat (principiul 4 din contextul de design). Se
 * distinge printr-o linie groasa in stanga si text negru, nu prin culoare:
 * rosul nu e disponibil, si e bine ca nu e. Gol, nu ocupa loc — deci pagina nu
 * sare cand apare. */
.l-form__error:not(:empty) {
  border-left: 2px solid var(--clb-ink);
  padding-left: var(--clb-space-5);
  font-size: 15px;
  font-weight: var(--clb-weight-medium);
}

.l-btn[disabled] {
  cursor: default;
  color: var(--clb-surface);
  background: var(--clb-ink-3);
  border-color: var(--clb-ink-3);
}

/* Confirmarea. Aceeasi linie de sus ca formularul pe care il inlocuieste: ce
 * era acolo a fost trimis, si atat. */
.l-done {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--clb-ink);
}
.l-done h2 {
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.03em;
}
.l-done h2:focus-visible {
  outline: none;
  box-shadow: var(--clb-shadow-focus);
  border-radius: var(--clb-radius-sm);
}
.l-done .l-lede { margin-top: var(--clb-space-6); }
.l-done .l-ask__back {
  margin: var(--clb-space-8) 0 0;
}


@media (prefers-reduced-motion: no-preference) {
  /* Si tranzitiile de stare stau aici, nu doar animatiile. Nu fiindca 120ms
   * de schimbare de culoare ar deranja pe cineva, ci ca sa existe un singur
   * loc in care se poate misca ceva: asa, "aceeasi pagina, statica" e
   * verificabil mecanic — vezi styles.spec.ts. */
  html { scroll-behavior: smooth; }
  .l-langs a,
  .l-quiet {
    transition: color var(--clb-motion-fast) linear;
  }
  .l-btn {
    transition:
      background-color var(--clb-motion-fast) linear,
      color var(--clb-motion-fast) linear;
  }
  /* Campul formularului: chenarul se ingroasa la trecerea cursorului. E
   * singura miscare a paginii de formular, si spune unde va ateriza clicul. */
  .l-input {
    transition:
      border-color var(--clb-motion-fast) linear,
      box-shadow var(--clb-motion-fast) linear;
  }

  /* Antetul: patratelele pornesc stinse si se aprind in ordinea din
   * content/demo.ts. "backwards" plus "paused" inseamna ca inainte de pornire
   * se vede cadrul 0% — deci nu exista licarire intre HTML si animatie. */
  .motion [data-demo] .l-cell.is-on {
    animation: l-cell-in 260ms var(--l-ease) backwards paused;
    animation-delay: var(--l-delay, 0ms);
  }
  .motion [data-demo].is-running .l-cell.is-on {
    animation-play-state: running;
  }
  /* Contorul are doua variante in HTML: cea statica (13) e cea implicita si
   * singura pe care o vede un cititor fara JavaScript sau cu miscare redusa;
   * cea vie porneste de la 0 si o inlocuieste doar cand pagina are voie sa
   * se miste. */
  .motion .l-count__live { display: inline; }
  .motion .l-count__static { display: none; }

  @supports (animation-timeline: view()) {
    .motion .l-steps::after {
      transform: scaleY(0);
      animation: l-rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
  }
}

@keyframes l-cell-in {
  from {
    border-color: var(--clb-line-2);
    background: var(--clb-line);
    transform: scale(0.82);
  }
  to {
    border-color: var(--clb-ink);
    background: var(--clb-ink);
    transform: none;
  }
}

@keyframes l-rule-draw {
  to { transform: scaleY(1); }
}