/* ==========================================================================
   SC METALPET SA — foaie de stil
   --------------------------------------------------------------------------
   Paleta e derivată din logo, nu inventată:
     · bleumarinul mărcii  #000086  (eșantionat din wordmark)
     · oțelul periat       #828282  (eșantionat din marca grafică)
   Fiecare pereche text/fundal folosită aici a fost verificată pentru contrast
   WCAG 2.2 AA. Tabelul de rapoarte: docs/PALETA.md

   Ordinea fișierului:
     01 Tokens
     02 Reset
     03 Tipografie
     04 Primitive de așezare
     05 Antet
     06 Componente
     07 Subsol
     08 Mișcare
     09 Tipărire
   ========================================================================== */

/* == 01 Tokens ============================================================ */

:root {
  /* Marca: rampa de bleumarin */
  --brand-900: #00004d;
  --brand-800: #000068;
  --brand-700: #000086; /* logo, exact */
  --brand-600: #1b24a8;
  --brand-500: #3a44c4;
  --brand-400: #6670dc;
  --brand-300: #949bec;
  --brand-200: #c2c6f5;
  --brand-100: #e4e6fb;

  /* Oțel: rampa neutră */
  --steel-900: #16191b;
  --steel-850: #1e2225;
  --steel-800: #2a2f33;
  --steel-700: #3c4247;
  --steel-600: #5a6165;
  --steel-500: #828282; /* logo, exact */
  --steel-400: #a6a9a7;
  --steel-300: #c6c8c4;
  --steel-200: #dcded9;
  --steel-100: #eff0ec;

  /* Brunarea oțelului: fundalul secțiunilor de contrast */
  --bluing: #0c1230;
  --bluing-deep: #070b22;

  /* Roluri semantice */
  --paper: var(--steel-100);
  --ink: var(--steel-900);
  --muted: var(--steel-600);
  --accent: var(--brand-700);

  /* Două tipuri de linie, deliberat distincte: `hairline` e decorativă și
     scutită de pragul 3:1; `rule` poartă informație și îl trece. */
  --hairline: rgba(22, 25, 27, 0.14);
  --hairline-inverse: rgba(255, 255, 255, 0.16);
  --rule: var(--steel-500);

  /* Tipografie */
  --font-sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* Scală pe rația 1.25, ancorată la 16px */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* Ritm: grilă de 8px */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius: 3px;
  --shell: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Lățimea unui rând de text.

     Era 68ch, ales ca și cum 1ch ar fi un caracter. Nu e: `ch` e lățimea
     cifrei „0”, iar în această familie cifra e mai lată decât litera mică
     obișnuită. Măsurat pe text german randat, 68ch însemna **82 de caractere
     pe rând** — peste pragul la care ochiul mai nimerește începutul rândului
     următor. 58ch măsoară în jur de 70, adică în plaja de citit confortabil.

     Măsurat, nu presupus: 68 × 70 / 82 ≈ 58, verificat apoi pe pagină la
     ambele mărimi de text, 18px și 14px. */
  --measure: 58ch;

  --ease-technical: cubic-bezier(0.22, 0.7, 0.25, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --header-height: 72px;
}

/* == 02 Reset ============================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-3));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
p,
figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Pe suprafețe întunecate bleumarinul mărcii nu are contrast: focusul comută
   pe treapta deschisă a aceleiași rampe. */
.is-dark :focus-visible {
  outline-color: var(--brand-300);
}

::selection {
  background: var(--brand-700);
  color: var(--steel-100);
}

/* == 03 Tipografie ======================================================== */

h1,
h2,
h3,
h4 {
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.35rem + 2.6vw, var(--text-5xl));
}

h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, var(--text-3xl));
}

h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.012em;
}

h4 {
  font-size: var(--text-lg);
  letter-spacing: -0.008em;
}

.lead {
  font-size: clamp(var(--text-base), 0.95rem + 0.4vw, var(--text-lg));
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}

.is-dark .lead {
  color: var(--steel-300);
}

.measure {
  max-width: var(--measure);
}

/* Toate cifrele tehnice trec prin mono, cu cifre tabulare: o coloană de
   toleranțe trebuie să se alinieze pe virgulă, nu aproximativ.

   Cifrele, nu tabelele. Pus pe tot tabelul, mono făcea ca cele două coloane
   de propoziții ale parcursului să se citească precum un listing de terminal;
   celulele cu cifre își poartă clasa `.mono` una câte una. */
.mono,
.spec-value,
.stat-value,
/* Tabelul panoului de administrare n-are stil propriu: trăia din regula pe
   `table` de mai sus. Rămâne unde era, ca restrângerea de acum să nu-i
   schimbe înfățișarea pe nesimțite. */
.admin__table {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Eticheta tehnică. Se folosește pentru categorii de date reale, nu ca
   ornament deasupra fiecărui titlu. */
.tech-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.is-dark .tech-label {
  color: var(--steel-400);
}

.prose p + p {
  margin-top: var(--space-2);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(0, 0, 134, 0.4);
  transition: text-decoration-color var(--dur-fast);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.is-dark .prose a {
  color: var(--brand-300);
  text-decoration-color: rgba(148, 155, 236, 0.45);
}

/* == 04 Primitive de așezare ============================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  /* Suprafața pe care stă secțiunea. Umbra de derulare a tabelelor își ia
     culoarea de acoperire de aici, ca un tabel mutat pe alt fond să nu mai
     desene două benzi deschise la capete. */
  --surface: var(--paper);
  padding-block: clamp(var(--space-5), 6vw, var(--space-7));
}

.section--tight {
  padding-block: clamp(var(--space-4), 4vw, var(--space-5));
}

.section--graphite {
  --surface: var(--steel-900);
  background: var(--steel-900);
  color: var(--steel-100);
}

.section--bluing {
  --surface: var(--bluing);
  background: var(--bluing);
  color: var(--steel-100);
}

.section--granite {
  --surface: var(--steel-200);
  background: var(--steel-200);
  color: var(--ink);
}

.section-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Titlul și subtitlul unei secțiuni, pe două coloane.

   Erau `1.1fr / 1fr`, aliniate la `end`: titlul cădea la baza rândului, iar
   subtitlul de trei rânduri începea deasupra lui. Cele două blocuri nu
   începeau pe nicio linie comună și nici nu se terminau pe una — se vedea pe
   „Ce putem prelucra”, unde titlul de un rând plutea sub un paragraf de trei.

   Acum: coloane egale și `baseline`, adică prima linie a subtitlului stă exact
   pe prima linie de scris a titlului. E singura aliniere care ține și când
   titlul trece pe două rânduri, fiindcă nu depinde de înălțimea niciunui bloc.
   Aceeași regulă pe toate cele 14 locuri unde apare perechea. */
@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: baseline;
  }
}

.stack > * + * {
  margin-top: var(--space-2);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 60rem) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* == 05 Antet ============================================================= */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--brand-700);
  color: var(--steel-100);
  border-radius: var(--radius);
  transition: top var(--dur-fast);
}

.skip-link:focus {
  top: var(--space-1);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 25, 27, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-inverse);
  color: var(--steel-100);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.brand__logo {
  height: 44px;
  width: auto;
}

.nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 64rem) {
  .nav {
    display: flex;
  }
}

.nav__link {
  position: relative;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--steel-300);
  padding-block: 0.5rem;
  transition: color var(--dur-fast);
}

.nav__link:hover {
  color: var(--steel-100);
}

.nav__link[aria-current='page'] {
  color: var(--steel-100);
}

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-300);
}

/* Comutatorul de limbă.

   `<details>` e singurul meniu care se deschide fără JavaScript, deci panoul
   nu are nevoie de `hidden` și nici de un script ca să fie folosibil. Scriptul
   doar îl închide la clic în afară sau la Escape. */

.locale-switch {
  position: relative;
}

.locale-switch__current {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  cursor: pointer;
  color: var(--steel-400);
  transition: color var(--dur-fast);
  /* Triunghiul propriu al lui `<summary>`, scos: săgeata e desenată în SVG,
     ca să se poată roti. `list-style` pentru Firefox, pseudo-elementul pentru
     Safari și Chrome — amândouă sunt necesare. */
  list-style: none;
}

.locale-switch__current::-webkit-details-marker {
  display: none;
}

.locale-switch__current:hover {
  color: var(--steel-100);
}

.locale-switch__caret {
  width: 10px;
  height: 7px;
  transition: transform var(--dur-fast);
}

.locale-switch[open] .locale-switch__caret {
  transform: rotate(180deg);
}

.locale-switch__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 10.5rem;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--steel-850);
  border: 1px solid var(--hairline-inverse);
  border-radius: var(--radius);
}

.locale-switch__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding-inline: 0.625rem;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--steel-300);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.locale-switch__link:hover {
  color: var(--steel-100);
  background: var(--steel-800);
}

.locale-switch__link[aria-current='true'] {
  color: var(--brand-300);
}

/* Steagul are nevoie de un contur: banda albă a Union Jack-ului și cea galbenă
   a steagului german ating marginea, iar pe fundalul închis al meniului
   dreptunghiul s-ar termina în gol. */
.flag {
  flex-shrink: 0;
  width: 21px;
  height: 14px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .locale-switch__caret {
    transition: none;
  }
}

/* == 06 Componente ======================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  white-space: nowrap;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition:
    background var(--dur-fast),
    color var(--dur-fast),
    border-color var(--dur-fast);
}

.button--primary {
  background: var(--brand-700);
  color: #fff;
}

.button--primary:hover {
  background: var(--brand-800);
}

.button--secondary {
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.button--secondary:hover {
  border-color: var(--ink);
}

.is-dark .button--secondary {
  border-color: var(--hairline-inverse);
  color: var(--steel-100);
}

.is-dark .button--secondary:hover {
  border-color: var(--steel-100);
}

/* Pe antetul grafit niciun albastru din rampa marcii nu da simultan text
   lizibil si separare de 3:1 fata de fundal (verificat: brand-700 da 1,13:1
   fata de antet). Butonul se inverseaza: 15,4:1 la ambele. */
.button--onDark {
  background: var(--steel-100);
  color: var(--steel-900);
}

.button--onDark:hover {
  background: #fff;
}

/* Rând de specificație cu linie punctată, ca într-un tabel de cote.
   Punctele leagă eticheta de valoare fără să concureze cu ele. */
.spec-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.4375rem;
  font-size: var(--text-xs);
}

.spec-label {
  font-family: var(--font-mono);
  color: var(--muted);
}

.is-dark .spec-label {
  color: var(--steel-400);
}

.spec-leader {
  border-bottom: 1px dotted var(--hairline);
  transform: translateY(-0.24em);
}

.is-dark .spec-leader {
  border-bottom-color: var(--hairline-inverse);
}

.spec-value {
  font-size: var(--text-xs);
  color: var(--ink);
  white-space: nowrap;
}

.is-dark .spec-value {
  color: var(--steel-100);
}

/* Marcaj pentru o valoare care nu e încă validată de client. Vizibil, dar
   discret: publicul-țintă verifică, iar o cifră neconfirmată prezentată ca
   fermă descalifică furnizorul. */
.unverified {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.unverified::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.is-dark .unverified {
  color: var(--steel-400);
}

/* Cifrele-cheie */
.stat {
  padding-block: var(--space-2);
}

.stat-value {
  display: block;
  font-size: clamp(var(--text-2xl), 1.4rem + 1.6vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.is-dark .stat-value {
  color: var(--steel-100);
}

.stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  color: var(--muted);
}

.is-dark .stat-label {
  color: var(--steel-400);
}

/* Firul Ariadnei */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Separatorul era `--steel-400`: pe hârtie dă **2,07:1**, la 12px. Blocul de
   la secțiunea 28 calibrase deja varianta pe întuneric și trecuse pe lângă
   cea deschisă — ochiul se duce la ce e greu de citit pe fond închis, nu la
   ce e prea palid pe fond deschis. `--muted` dă 5,50:1. */
.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  color: var(--muted);
}

/* Măsurat la 390px: legăturile firimiturilor erau 51×14 și 59×14 — degetul
   cere 24×24 (WCAG 2.5.8), iar 14 pixeli înălțime sunt greu de nimerit chiar
   și fără normă. Cutia crește pe verticală; textul rămâne unde era. */
.breadcrumbs a {
  display: inline-block;
  padding-block: 0.3125rem;
}

.breadcrumbs a:hover {
  color: var(--ink);
}

/* == 07 Subsol ============================================================ */

.colophon {
  background: var(--steel-900);
  color: var(--steel-300);
  padding-block: var(--space-5) var(--space-3);
}

.colophon a:hover {
  color: var(--steel-100);
}

.colophon__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .colophon__grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

.colophon__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--steel-100);
  margin-bottom: var(--space-1);
}

.colophon__list li + li {
  /* Erau 7px între rânduri, dar spațiul stătea în afara țintei. Acum îl
     poartă legătura însăși: distanța dintre două texte rămâne aproape
     aceeași, iar suprafața de atins se dublează. */
  margin-top: 0;
}

/* Măsurat la 390px: legăturile subsolului aveau 15px înălțime la 7px
   distanță, deci un pas de 22px — sub 24×24 și prea strâns și pentru
   excepția de spațiere din WCAG 2.5.8. Cutia crește, textul stă pe loc. */
.colophon__list a,
.colophon__baseline a {
  display: inline-block;
  padding-block: 0.3125rem;
}

.colophon__list a {
  font-size: var(--text-sm);
}

.colophon__baseline {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--steel-400);
}

/* == 08 Mișcare =========================================================== */

/* Un singur moment orchestrat la încărcare, pe pagina de start. Restul
   mișcării răspunde acțiunii vizitatorului. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes draw-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-reveal] {
  opacity: 0;
}

[data-reveal].is-revealed {
  animation: rise var(--dur-slow) var(--ease-technical) both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
  }
}

/* == 09 Tipărire ========================================================== */

@media print {
  /* --- Tipar ---------------------------------------------------------------
     Un inginer de achiziții pune pagina de capabilități la dosarul de
     evaluare. Până acum, tipărită, ea ieșea în mare parte **goală**: șase
     secțiuni de pe pagina de start au fundal închis și text deschis, iar
     browserele nu tipăresc fundalurile. Textul alb pe hârtie albă nu e text.

     `!important` e necesar aici fiindcă 59 de reguli din foaie dau culori
     deschise, fiecare mai specifică decât un selector general. Pentru tipar,
     ele trebuie învinse toate deodată. */

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Ce nu are sens pe hârtie: navigația, comenzile, lucrurile de atins. */
  .masthead,
  .colophon,
  .skip-link,
  .menu-toggle,
  .mobile-nav,
  .visualizer__slider,
  .filters,
  .chip,
  /* Cuprinsul e o listă de sărituri în pagină. Pe hârtie nu sare nimeni:
     ar tipări șase fișe cu chenar care nu duc nicăieri. */
  .page-index,
  .button,
  .cta-band {
    display: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  /* Scena procesului e de trei ori cât ecranul și stă lipită — pe hârtie ar
     produce pagini goale. Devine o secțiune obișnuită, de înălțimea ei. */
  .chain-scene {
    height: auto !important;
  }

  .chain-scene__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  .chain-scene__stage,
  .part__stage,
  .kinematics__stage,
  .roughness__stage,
  .stack__stage,
  .coverage__stage,
  .cutting__stage,
  .uncert__stage,
  .stock__stage {
    height: 60mm !important;
    border: 1px solid #999 !important;
  }

  .section {
    padding-block: 8mm;
  }

  /* Titlurile nu rămân singure la piciorul paginii, iar fișele nu se rup. */
  h1, h2, h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .machine,
  .spec-row,
  .checklist__item,
  .decode__panel,
  .chain-detail__item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Pe hârtie, un link nu duce nicăieri dacă nu-și scrie adresa. Doar cele
     externe: adresele interne ar umple pagina fără să ajute. */
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  /* Chenarele rămân, ca tabelele de cote să se citească. */
  .machine,
  .decode__panel,
  .panel {
    border: 1px solid #999 !important;
  }

  .spec-leader {
    border-bottom: 1px dotted #999 !important;
  }
}

/* == Utilitare ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* == 10 Antet de pagină ==================================================== */

.page-header {
  border-bottom: 1px solid var(--hairline);
}

.page-header .breadcrumbs {
  margin-bottom: var(--space-3);
}

.page-header__kicker {
  margin-bottom: var(--space-1);
}

.page-header__intro {
  margin-top: var(--space-2);
}

/* == 11 Banda de anvelopă ================================================== */

/* Cifrele-cheie de capabilitate, în linie. Sunt primul lucru pe care îl caută
   un inginer de achiziții, deci stau sus și nu se ascund după derulare. */
.envelope-strip {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}

@media (min-width: 40rem) {
  .envelope-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.envelope-strip li {
  background: var(--paper);
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

@media (min-width: 40rem) {
  .envelope-strip li {
    padding-left: var(--space-2);
  }
  .envelope-strip li:first-child {
    padding-left: 0;
  }
}

.envelope-strip .mono {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* == 12 Filtre ============================================================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filters__label {
  flex-shrink: 0;
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip,
.page-index__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  transition:
    border-color var(--dur-fast),
    color var(--dur-fast),
    background var(--dur-fast);
}

/* Pe telefon, cuprinsul de șase sărituri ocupa 318px — 38% din primul ecran,
   înainte ca pagina să fi spus ceva. Fișele se strâng, dar rămân peste pragul
   de atingere: 32px înălțime, nu 24 la limită. */
@media (max-width: 40rem) {
  .page-index__link {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs);
  }

  .page-index__list {
    gap: 0.375rem;
  }
}

.chip:hover,
.page-index__link:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Cuprinsul paginii.

   Măsurat: pagina de start are 10,5 ecrane, cea de calitate 7,2. Cine caută
   un singur lucru n-avea de unde să știe că el există pe pagină. Lista stă
   sub antet, nu plutește: o hartă se citește o dată, nu se urmărește. */
.page-index__label {
  margin-bottom: var(--space-2);
}

.page-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Textul unei săritori e un titlu de secțiune, nu o etichetă de filtru: pe
   telefon se rupe în două rânduri în loc să iasă din ecran. */
.page-index__link {
  white-space: normal;
}

.chip.is-active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

/* Ștergerea filtrelor nu e o alegere, e o ieșire: nu trebuie să arate ca
   celelalte fișe, altfel pare a șaptea categorie. */
/* Rupere de rând într-un container flex: fără ea, eticheta „Dotare” se
   lipește la capătul rândului de procese și pare încă o categorie. */
.filters__break {
  flex-basis: 100%;
  height: 0;
}

.chip--quiet {
  border-style: dashed;
  color: var(--muted);
}

.chip--quiet:hover {
  color: var(--ink);
}

/* Ce se scrie când nicio combinație nu dă niciun utilaj. */
.machine-list__none {
  max-width: var(--measure);
  margin-block: var(--space-3);
  color: var(--muted);
}

.filters__count {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-left: auto;
}

/* == 13 Fișa de utilaj ===================================================== */

.machine-list {
  border-top: 1px solid var(--hairline);
}

.machine {
  border-bottom: 1px solid var(--hairline);
}

.machine[hidden] {
  display: none;
}

.machine__head {
  display: grid;
  /* `minmax(0, 1fr)` și nu `1fr`: o coloană `1fr` păstrează `min-width: auto`
     și refuză să coboare sub cel mai lung cuvânt. Un nume german de utilaj
     scris într-un singur cuvânt scotea antetul fișei din ecran la 320px. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  text-align: left;
  transition: color var(--dur-fast);
}

@media (min-width: 60rem) {
  .machine__head {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto 1.5rem;
  }
}

.machine__head:hover .machine__name {
  color: var(--accent);
}

.machine__category {
  grid-row: 1;
}

.machine__name {
  /* Un cuvânt mai lat decât ecranul se rupe, în loc să împingă pagina. */
  overflow-wrap: break-word;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: color var(--dur-fast);
}

.machine__count {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.375rem;
}

.machine__summary {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* Comutatorul e un semn „+" desenat din două linii: se rotește în „×" la
   deschidere, fără să încarce o pictogramă. */
.machine__toggle {
  position: relative;
  width: 1rem;
  height: 1rem;
  justify-self: end;
}

.machine__toggle::before,
.machine__toggle::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--muted);
  transition: transform var(--dur-base) var(--ease-technical);
}

.machine__toggle::after {
  transform: rotate(90deg);
}

.machine__head[aria-expanded='true'] .machine__toggle::before {
  transform: rotate(135deg);
}

.machine__head[aria-expanded='true'] .machine__toggle::after {
  transform: rotate(45deg);
}

.machine__body {
  padding-bottom: var(--space-3);
}

.machine__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 60rem) {
  .machine__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-5);
  }
}

.spec-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.spec-list .spec-row {
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}

.spec-list dt,
.spec-list dd {
  margin: 0;
}

/* Dezvăluirea în cascadă a rândurilor: e o acțiune a vizitatorului, nu o
   animație pasivă la derulare. */
.machine__head[aria-expanded='true'] ~ .machine__body .spec-row {
  animation: rise 280ms var(--ease-technical) both;
  animation-delay: calc(var(--row, 0) * 40ms);
}

.spec-flag {
  margin-left: 0.3125rem;
  color: var(--muted);
}

.machine__nospecs,
.machine__summary-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
}

/* Descrierea utilajului, așa cum a trimis-o firma. E text curgător, nu
   specificație: primește lățimea de citit și tonul stins al notelor. */
.machine__description {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

.machine__source {
  margin-top: var(--space-2);
  display: grid;
  gap: 0.25rem;
}

.machine__source-body {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}

.machine__question {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.375rem;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}

.machine-list__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

/* == 14 Întrebări deschise ================================================= */

.question-list {
  border-top: 1px solid var(--hairline);
}

.question {
  display: grid;
  gap: 0.25rem var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .question {
    grid-template-columns: 2rem 13rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.question__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

.question__model {
  font-weight: 600;
}

.question__text {
  max-width: var(--measure);
  color: var(--muted);
  line-height: 1.55;
}

/* == 15 Bandă de îndemn ==================================================== */

.cta-band {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.cta-band .button {
  margin-top: var(--space-1);
}

/* Nota de plafonare: apare doar pe utilajele a căror documentație de catalog
   indică mai mult decât capabilitatea pe care o publicăm. */
.machine__capped {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--steel-800);
  max-width: 58ch;
}

/* == 16 Lanțul de procese ================================================== */

.process-chain {
  border-top: 1px solid var(--hairline);
}

.process {
  border-bottom: 1px solid var(--hairline);
}

.process__link {
  display: grid;
  gap: 0.375rem var(--space-3);
  padding-block: var(--space-3);
  align-items: baseline;
  transition: color var(--dur-fast);
}

@media (min-width: 48rem) {
  .process__link {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  }
}

.process__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

.process__title {
  display: block;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.014em;
  transition: color var(--dur-fast);
}

.process__link:hover .process__title {
  color: var(--accent);
}

.process__intro {
  display: block;
  margin-top: 0.4375rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
}

.process__meta {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* == 17 Cifra de titlu ===================================================== */

.headline-figure {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: var(--space-2);
  border-block: 1px solid var(--hairline);
}

.headline-figure__value {
  font-size: clamp(var(--text-2xl), 1.4rem + 2vw, var(--text-4xl));
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.sibling-list {
  border-top: 1px solid var(--hairline);
}

.sibling-list li {
  border-bottom: 1px solid var(--hairline);
}

.sibling-list a {
  display: block;
  padding-block: var(--space-2);
  transition: color var(--dur-fast);
}

.sibling-list a:hover {
  color: var(--accent);
}

.sibling-list__title {
  font-size: var(--text-lg);
  font-weight: 500;
}

/* == 18 Materiale ========================================================== */

.material-grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: var(--space-2);
}

@media (min-width: 40rem) {
  .material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.material {
  background: var(--paper);
  padding: var(--space-2);
}

.section--granite .material {
  background: var(--steel-200);
}

.material__name {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.material__grades {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.material__grades li {
  font-size: var(--text-xs);
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
}

/* Ce înseamnă grupa la prelucrare.

   E textul pentru care un inginer deschide pagina, deci se citește ca text,
   nu ca notă de subsol: mărime normală, rând aerisit, lățime de citit. Linia
   de deasupra îl desparte de eticheta mărcilor — altfel cele două blocuri par
   una și aceeași listă. */
.material__machining {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Nota de proveniență stă sub explicație și rămâne vizibil mai stinsă: una
   spune cum se comportă materialul, cealaltă cât de sigură e lista. */
.material__note {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--muted);
}

/* == 19 Calitate =========================================================== */

/* Fraza care leagă cele șapte fișe stă sub ele, despărțită de o linie:
   e o concluzie, nu o a opta fișă. */
.quality-note {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--hairline);
}

.quality-grid {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

@media (min-width: 40rem) {
  .quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .quality-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.quality {
  background: var(--paper);
  padding: var(--space-2);
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.quality__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

.quality__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.quality__body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.cert-list {
  border-top: 1px solid var(--hairline);
}

.cert {
  display: grid;
  gap: 0.375rem var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .cert {
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

.cert__standard {
  font-weight: 500;
}

.cert__body {
  color: var(--muted);
  line-height: 1.55;
}

.cert__status {
  font-size: var(--text-xs);
}

/* == 20 Industrii ========================================================== */

.industry-list {
  border-top: 1px solid var(--hairline);
}

.industry {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.industry__index {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Ce fel de reper aduce ramura. De la 52rem stă în dreapta numelui, ca lista
   să rămână scanabilă pe verticală; mai jos, sub el. */
.industry__text {
  display: grid;
  gap: 0.25rem var(--space-3);
}

@media (min-width: 52rem) {
  .industry__text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    align-items: baseline;
  }
}

.industry__parts {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

.industry__name {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.industry-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

/* == 21 Despre ============================================================= */

.timeline {
  border-top: 1px solid var(--hairline);
}

.milestone {
  display: grid;
  gap: 0.375rem var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 48rem) {
  .milestone {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.milestone__year {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.milestone__body {
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: var(--measure);
}

.value__title {
  font-size: var(--text-xl);
  font-weight: 600;
}

.value__body {
  margin-top: 0.5rem;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

.fact-list {
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.fact {
  display: grid;
  gap: 0.375rem var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 48rem) {
  .fact {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: baseline;
  }
}

.fact dd {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* == 22 Formularul de ofertă =============================================== */

.rfq-layout {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64rem) {
  .rfq-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.rfq__group {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-2);
}

.rfq__group legend {
  padding: 0;
  margin-bottom: var(--space-1);
}

.rfq__row {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .rfq__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Capcana pentru roboți: scoasă din flux fără display:none, ca un robot care
   verifică vizibilitatea calculată să nu o sară. */
.rfq__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  display: grid;
  gap: 0.375rem;
}

.field--narrow {
  max-width: 16rem;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  /* 14px pe un rând de 1,64 dădeau 23px înălțime — cu un pixel sub pragul
     de atingere. Eticheta e ținta care pune cursorul în câmp. */
  line-height: 1.75;
}

.field__input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--steel-300);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--text-base);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}

.field__input:hover {
  border-color: var(--steel-500);
}

.field__input:focus {
  border-color: var(--brand-700);
  /* Conturul nu se scoate, ci se face transparent. În modul de contrast
     ridicat din Windows umbrele sunt ignorate, iar un `outline: 0` ar lăsa
     câmpul focalizat fără niciun semn; un contur transparent e forțat vizibil
     de sistem și devine acolo singurul indicator. */
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--brand-100);
}

.field__input--area {
  min-height: auto;
  resize: vertical;
  line-height: 1.6;
}

.field__input[aria-invalid="true"] {
  border-color: #a3242b;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}

.field__error {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: #a3242b;
}

.field__file {
  font-size: var(--text-sm);
  padding: 0.5rem 0;
}

.file-list {
  display: grid;
  gap: 0.25rem;
}

.file-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding-block: 0.25rem;
  border-bottom: 1px dotted var(--hairline);
  color: var(--muted);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.55;
  cursor: pointer;
}

.check input {
  /* Erau 18×18. Caseta de bifat e ținta care dă consimțământul; sub degete,
     18 pixeli sunt puțini, iar pragul din WCAG 2.5.8 e 24. */
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
  accent-color: var(--brand-700);
}

.rfq__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

.rfq__note {
  font-size: var(--text-xs);
  color: var(--muted);
  max-width: 44ch;
}

.rfq__failure {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid #a3242b;
  background: #fdf2f2;
  font-size: var(--text-sm);
  color: #7d1c22;
}

.rfq__aside {
  display: grid;
  gap: var(--space-3);
}

.panel {
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.panel__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.steps {
  display: grid;
  gap: 0.625rem;
}

.step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.625rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.step__index {
  font-size: var(--text-xs);
  color: var(--accent);
}

/* Cei patru pași de la desen la serie.

   Numerele stau într-o coloană proprie, legate de o linie verticală: pașii se
   citesc în ordine, iar linia o arată fără s-o scrie. E același gest ca axa
   dintr-un desen tehnic — reperul față de care se citește restul. */
.onboarding {
  display: grid;
  gap: 0;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.onboarding__step {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.onboarding__step:last-child {
  padding-bottom: 0;
}

/* Linia care leagă pașii. Pe ultimul se oprește: un fir care iese din ultimul
   pas ar promite unul care nu vine. */
.onboarding__index {
  position: relative;
  font-size: var(--text-xs);
  color: var(--accent);
  text-align: right;
  padding-right: var(--space-1);
}

.onboarding__step:not(:last-child) .onboarding__index::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: -1px;
  bottom: calc(-1 * var(--space-3));
  border-right: 1px solid var(--hairline);
}

.onboarding__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.onboarding__body {
  margin-top: 0.375rem;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* „Dacă piesa e așa” → „merge pe acolo”.

   Două coloane de la 52rem în sus, fiindcă perechea se citește dintr-o
   privire doar când stau alături; mai jos se despachetează pe verticală, cu
   termenul deasupra lămuririi lui. Linia dintre perechi ține locul unui
   chenar de tabel: separă fără să încarce. */
.routing {
  margin: var(--space-3) 0 0;
}

.routing__pair {
  display: grid;
  gap: 0.25rem var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline);
}

.routing__pair:last-child {
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 52rem) {
  .routing__pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }
}

.routing__when {
  font-weight: 600;
  line-height: 1.4;
}

.routing__then {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Cele două moduri de lucru în cinci axe, plus ce alegi și ce nu rezolvă.

   Patru blocuri egale: primele două sunt perechea care se compară, iar
   următoarele două trag concluzia. Pe două coloane de la 52rem, ca perechea
   să stea alături — o comparație pusă una sub alta nu mai e o comparație. */
.modes {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Când blocurile urmează după nota unui tabel, 24px nu ajung: măsurat, e
   exact distanța dintre introducere și tabel, așa că explicațiile se citeau
   ca o continuare a notei. Aici începe altă mișcare a secțiunii — de la ce
   scrie în tabel la ce înseamnă — și are nevoie de o respirație în plus. */
.figures__note + .modes,
.prose-table__note + .modes {
  margin-top: var(--space-5);
}

@media (min-width: 52rem) {
  .modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }
}

.modes__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--hairline);
}

.modes__body {
  max-width: var(--measure);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Cele patru blocuri despre indicele de capabilitate.

   Două coloane de la 52rem. Numărul stă deasupra titlului, mic și în culoarea
   de accent: blocurile se citesc în ordine, dar nu sunt pași — sunt fețe ale
   aceleiași întrebări, deci nu poartă linia care leagă pașii de pe „Despre”. */
.capability {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 52rem) {
  .capability {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-4);
  }
}

.capability__index {
  display: block;
  font-size: var(--text-2xs);
  color: var(--accent);
}

.capability__title {
  margin-top: 0.25rem;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.capability__body {
  max-width: var(--measure);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Tabelul de propoziții.

   Aici chiar e un tabel — trei coloane de date, cu antet — deci se scrie ca
   tabel, nu ca listă stilizată: cititorul de ecran anunță singur coloana la
   fiecare celulă. Sub 52rem, un tabel de trei coloane cu propoziții întregi nu
   încape; se derulează lateral în cutia lui, nu strânge pagina după el. */
.prose-table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;

  /* Umbra care spune că tabelul continuă.

     Măsurat: la un ecran de 768px cutia are 692px, iar tabelul 704 — se
     derulează cu 12px, prea puțin ca ochiul să observe și exact cât să taie
     marginea ultimei coloane. Nimic nu-i spunea cititorului că mai e ceva
     acolo.

     Două perechi de degradeuri: cele pe hârtie se derulează cu conținutul
     (`local`) și acoperă umbrele când ai ajuns la capăt; umbrele stau lipite
     Acoperirea ține hârtie plină pe primii 60% și abia apoi se stinge: pus la
     zero, degradeul era deja pe jumătate transparent acolo unde se termină
     umbra, și rămânea o urmă murdară la marginea din stânga. Văzut colorând
     temporar umbrele, nu citind regula.

     de marginile cutiei (`scroll`). Fără JavaScript. Culoarea de acoperire
     vine din jetonul `--surface`, pe care îl pune fiecare secțiune: pe
     granit, acoperirea cu hârtie desena două benzi deschise la capete. */
  background-image:
    linear-gradient(to right, var(--surface) 60%, transparent),
    linear-gradient(to left, var(--surface) 60%, transparent),
    linear-gradient(to right, rgba(22, 25, 27, 0.13), transparent),
    linear-gradient(to left, rgba(22, 25, 27, 0.13), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.prose-table {
  /* Măsurat la un ecran de 1280: fără limită, tabelul ajunge la 1224px, iar
     coloana de propoziții la 537px — 77 de semne pe rând, peste pragul pe
     care restul site-ului îl ține la 70 prin `--measure`. La 60rem, coloana
     măsoară 397px, adică în jur de 56. */
  max-width: 60rem;
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}

.prose-table th,
.prose-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

/* Antetul poartă tipografia de etichetă tehnică, dar NU clasa `.tech-label`:
   aceea e `display: inline-block`, ceea ce anulează `table-cell` și face cele
   trei titluri să curgă unul sub altul, în afara coloanelor lor. */
.prose-table thead th,
.figures thead th {
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.prose-table__key {
  /* Se strânge după conținutul ei, nu după o cifră fixă.

     9rem erau croiți pentru „Spannungsarmglühen”, cheia cea mai lungă din
     parcursul reperului. Tabelele de mai târziu au chei de două semne — H7,
     2.1, +0,3 — iar coloana rămânea largă de 144px pentru un text de 19.
     Măsurat: cu `width: 1%` coloana ajunge la 70px acolo unde cheile sunt
     scurte și rămâne 179 acolo unde chiar e nevoie. */
  width: 1%;
  white-space: nowrap;
  /* …dar nu mai strâns decât atât: la 70px, capul „PASSUNG” rămânea la 16px
     de „ABMASSE BEI Ø50”, iar cele două etichete în majuscule mono se citeau
     ca una singură. La 6rem, golul dintre ele e 42px. */
  min-width: 6rem;
  font-weight: 600;
}

.prose-table__what,
.prose-table__aside {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.prose-table__aside {
  color: var(--muted);
}

.prose-table__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Deriva cotei cu temperatura, ca tabel.

   Tot un tabel adevărat, dar altfel decât parcursul reperului: acolo
   celulele sunt propoziții și au nevoie de 44rem ca să nu se rupă în
   coloane de câte un cuvânt; aici sunt un nume de material și două cifre
   scurte. Fără lățime minimă, încape și pe telefon fără derulare. */
.figures {
  /* Măsurat: fără limită, tabelul se întinde pe toată lățimea machetei —
     1169px la un ecran de 1280, cu 800px de gol între numele materialului
     și cifra lui. Un tabel se citește pe rânduri, iar rândul trebuie să
     încapă într-o privire. */
  max-width: 40rem;
  width: 100%;
  margin-top: var(--space-3);
  border-collapse: collapse;
  text-align: left;
}

.figures th,
.figures td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
}

.figures tbody tr:last-child th,
.figures tbody tr:last-child td {
  border-bottom: 0;
}

/* Unitatea nu trece prin `text-transform`: „µm” majusculat dă „MM”, fiindcă
   majuscula lui µ e Μ grecesc. Aceeași capcană pentru orice simbol grecesc
   dintr-un cap de coloană. */
.figures__unit {
  display: block;
  margin-top: 0.25rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

.figures__label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* Cifrele nu se rup niciodată de unitatea lor: „11,5” pe un rând și „µm”
   pe următorul se citește ca două lucruri, nu ca o valoare. */
.figures__num {
  font-size: var(--text-sm);
  white-space: nowrap;
  color: var(--muted);
}

/* Coloana pentru care există tabelul. Fiecare tabel și-o alege singur:
   deriva la temperatură, respectiv clasa de toleranță pe care o poartă
   majoritatea desenelor. */
.figures__num--lead {
  font-weight: 600;
  color: var(--accent);
}

.figures__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Desenul randamentului: aceeași bucată de bară, tăiată în două feluri.

   Convențiile sunt ale celorlalte desene de pe site — contur subțire, cotă
   cu vârfuri și linii de extensie, etichete în mono. Ce se adaugă aici e o
   singură idee: bucata care devine piesă se desenează plină, iar tăietura,
   accentuată. Ochiul numără benzile fără să citească nicio cifră. */
.yield-draw {
  margin: var(--space-3) 0 0;
}

.yield-draw__svg {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
}

/* Conturul ferestrei de bară: o singură linie peste tot, ca la un desen. */
.yield-draw__bar {
  fill: none;
  stroke: var(--steel-600);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.yield-draw__part {
  fill: var(--steel-300);
}

/* Materialul plătit care nu ajunge în nicio piesă. */
.yield-draw__loss {
  fill: var(--accent);
}

/* Bucata de bară rămasă în fereastră merge mai departe: nu e nici piesă, nici
   pierdere. Umplută, se citea ca a treia piesă pe rândul de 200 mm — golul e
   adevărul: acolo bara continuă, dar încă nu s-a tăiat nimic. */
.yield-draw__rest {
  fill: none;
}

.yield-draw__label,
.yield-draw__dimText {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--muted);
}

.yield-draw__dim line {
  stroke: var(--muted);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.yield-draw__dim path {
  fill: var(--muted);
}

.yield-draw__dim .yield-draw__ext {
  opacity: 0.45;
}

.yield-draw__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

/* Textul dintr-un SVG se micșorează odată cu viewBox-ul. Măsurat la 390px:
   desenul se desenează la 335 din 760 de unități, adică 0,44 — iar eticheta de
   13 unități ajungea la 5,8 pixeli pe ecran, de necitit. La lățimi mici
   literele cresc în unități, ca să rămână de aceeași mărime pe sticlă. */
@media (max-width: 40rem) {
  .yield-draw__label,
  .yield-draw__dimText {
    font-size: 26px;
  }
}

.contact-card {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.contact-card a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.legal-body {
  display: grid;
  gap: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
}

.prose h2:first-child {
  margin-top: 0;
}

/* == 23 Banner de dezvoltare =============================================== */

.dev-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 0.625rem var(--space-2);
  background: #4a1d1d;
  color: #ffd9d9;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* Cele două bannere de dezvoltare stau amândouă lipite de baza ferestrei.
   Cel cu lucrurile de confirmat urcă deasupra celuilalt, ca să se vadă
   amândouă — altfel al doilea l-ar acoperi pe primul fără să se observe.
   Culoarea e alta fiindcă înseamnă altceva: roșu = ceva lipsește din cod,
   chihlimbar = ceva așteaptă un răspuns de la client. */
.dev-banner--confirm {
  bottom: 2.75rem;
  background: #3d3218;
  color: #f3e2b8;
}

.dev-banner--confirm code {
  color: inherit;
  opacity: 0.75;
}

/* == 24 Vizualizatorul de anvelopă ========================================= */

.visualizer {
  display: grid;
  gap: var(--space-3);
  align-items: start;
}

@media (min-width: 64rem) {
  .visualizer {
    grid-template-columns: 15rem minmax(0, 1fr) 19rem;
    gap: var(--space-4);
  }
}

.visualizer__controls {
  display: grid;
  gap: var(--space-2);
}

/* Cifra introdusă e o cotă: mono, mare, aliniată ca într-un tabel. */
.visualizer__number {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.visualizer__slider {
  width: 100%;
  margin-top: 0.5rem;
  accent-color: var(--brand-700);
}

.visualizer__processes {
  border: 0;
  margin: 0;
  padding: 0;
}

.visualizer__processes legend {
  padding: 0;
  margin-bottom: 0.5rem;
}

.visualizer__process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.visualizer__process-grid .chip {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  padding-inline: 0.5rem;
}

/* --- Desenul --- */

.visualizer__stage {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.is-dark .visualizer__stage {
  background: var(--steel-850);
  border-color: var(--hairline-inverse);
}

.visualizer__drawing {
  width: 100%;
  height: auto;
  display: block;
  color: var(--steel-600);
}

.vz-part {
  fill: var(--steel-300);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition:
    x 220ms var(--ease-technical),
    y 220ms var(--ease-technical),
    width 220ms var(--ease-technical),
    height 220ms var(--ease-technical);
}

.is-dark .vz-part {
  fill: var(--steel-700);
  stroke: var(--steel-100);
}

.vz-envelope {
  fill: none;
  stroke: var(--brand-700);
  stroke-width: 1.2;
  stroke-dasharray: 7 5;
  opacity: 0.75;
  transition:
    x 220ms var(--ease-technical),
    y 220ms var(--ease-technical),
    width 220ms var(--ease-technical),
    height 220ms var(--ease-technical);
}

.is-dark .vz-envelope {
  stroke: var(--brand-300);
}

.vz-axis {
  stroke: var(--steel-500);
  stroke-width: 1;
  stroke-dasharray: 18 4 3 4;
}

.vz-dim-line {
  stroke: var(--brand-700);
  stroke-width: 1;
}

.vz-arrow {
  fill: var(--brand-700);
}

.vz-dim-text {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--brand-700);
}

.is-dark .vz-dim-line,
.is-dark .vz-arrow {
  stroke: var(--brand-300);
  fill: var(--brand-300);
}

.is-dark .vz-dim-text {
  fill: var(--brand-300);
}

.visualizer__caption {
  padding: 0.5rem var(--space-2) 0.625rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs);
  color: var(--muted);
}

.is-dark .visualizer__caption {
  border-top-color: var(--hairline-inverse);
  color: var(--steel-400);
}

/* --- Rezultatele --- */

.visualizer__results {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.visualizer__verdict {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* Verdictul nu se colorează în verde/roșu: pe un site tehnic, o piesă care nu
   intră nu e o eroare, e o conversație. Diferența o face bara din stânga. */
.visualizer__verdict[data-state] {
  padding-left: 0.75rem;
  border-left: 3px solid var(--steel-400);
}

.visualizer__verdict[data-state='fits'] {
  border-left-color: var(--brand-700);
}

.visualizer__verdict[data-state='near-limit'],
.visualizer__verdict[data-state='fits-to-confirm'] {
  border-left-color: var(--steel-500);
}

.visualizer__verdict[data-state='out-of-envelope'],
.visualizer__verdict[data-state='beyond-public-cap'] {
  border-left-color: var(--steel-600);
}

.is-dark .visualizer__verdict[data-state='fits'] {
  border-left-color: var(--brand-300);
}

.visualizer__explain {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.is-dark .visualizer__explain {
  color: var(--steel-300);
}

.visualizer__count {
  margin-top: 0.25rem;
}

.visualizer__machines {
  display: grid;
  gap: 0.625rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.625rem;
}

.is-dark .visualizer__machines {
  border-top-color: var(--hairline-inverse);
}

.vz-machine {
  display: grid;
  gap: 0.3125rem;
}

.vz-machine.is-entering {
  animation: rise 260ms var(--ease-technical) both;
}

.vz-machine--empty {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--muted);
}

.vz-machine__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.vz-machine__name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.vz-machine__track {
  display: block;
  height: 3px;
  background: var(--steel-300);
  border-radius: 2px;
  overflow: hidden;
}

.is-dark .vz-machine__track {
  background: var(--steel-700);
}

.vz-machine__fill {
  display: block;
  height: 100%;
  background: var(--brand-700);
  transition: width 260ms var(--ease-technical);
}

.is-dark .vz-machine__fill {
  background: var(--brand-300);
}

.vz-machine[data-state='near'] .vz-machine__fill {
  background: var(--steel-500);
}

.vz-machine__meta {
  font-size: var(--text-2xs);
  color: var(--muted);
  line-height: 1.4;
}

.is-dark .vz-machine__meta {
  color: var(--steel-400);
}

.visualizer__cta {
  margin-top: 0.5rem;
  justify-self: start;
}

.is-dark .visualizer__cta {
  background: var(--steel-100);
  color: var(--steel-900);
}

.visualizer__noscript {
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .vz-part,
  .vz-envelope,
  .vz-machine__fill {
    transition: none;
  }
}

/* == 25 Hero =============================================================== */

.hero {
  background: var(--steel-900);
  color: var(--steel-100);
  padding-block: clamp(var(--space-5), 7vw, var(--space-7)) 0;
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding-bottom: clamp(var(--space-4), 5vw, var(--space-6));
}

@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-5);
  }
}

.hero__title {
  margin-top: var(--space-2);
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero__subhead {
  margin-top: var(--space-2);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

.hero__figure {
  min-width: 0;
}

.hero__drawing {
  width: 100%;
  height: auto;
}

/* --- Desenul se trasează, nu apare ---------------------------------------
   Un singur moment orchestrat la încărcare: conturul se desenează, apoi apar
   muchiile acoperite și cotele. Restul paginii rămâne liniștit. */

.hero-draw__outline {
  fill: none;
  stroke: var(--steel-400);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: hero-trace 1500ms var(--ease-draw) 160ms forwards;
}

.hero-draw__hidden {
  stroke: var(--steel-600);
  stroke-width: 1;
  stroke-dasharray: 10 7;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: fade 520ms ease 1250ms forwards;
}

.hero-draw__feature {
  stroke: var(--steel-500);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: fade 520ms ease 1150ms forwards;
}

.hero-draw__axis {
  stroke: var(--steel-600);
  stroke-width: 1;
  stroke-dasharray: 26 5 4 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: fade 620ms ease 900ms forwards;
}

.hero-draw__dim line {
  stroke: var(--brand-300);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hero-draw__dim path {
  fill: var(--brand-300);
}

.hero-draw__dim .hero-draw__ext {
  stroke: var(--brand-300);
  opacity: 0.45;
}

.hero-draw__dim {
  opacity: 0;
  animation: fade 560ms ease 1450ms forwards;
}

@keyframes hero-trace {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-draw__outline {
    stroke-dashoffset: 0;
    animation: none;
  }
  .hero-draw__hidden,
  .hero-draw__feature,
  .hero-draw__axis,
  .hero-draw__dim {
    opacity: 1;
    animation: none;
  }
}

/* --- Cifrele-cheie --- */

.stats {
  display: grid;
  gap: 1px;
  background: var(--hairline-inverse);
  border-top: 1px solid var(--hairline-inverse);
}

/* Cinci cifre în trei coloane înseamnă 3 + 2, iar a șasea celulă rămâne o
   casetă goală cu chenar — se vede la 768px. Cinci n-are alt împărțitor decât
   1 și 5, iar cinci coloane la 640px ar da 120px de cifră, deci soluția nu e
   în numărul de coloane: ultima cifră ocupă golul. Rândul se închide, nu mai
   rămâne nimic gol, iar diferența de lățime arată ca o alegere, nu ca o
   scăpare. De la 64rem intră toate cinci pe un rând și regula se stinge. */
@media (min-width: 40rem) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats .stat:last-child {
    grid-column: span 2;
  }
}

@media (min-width: 64rem) {
  .stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .stats .stat:last-child {
    grid-column: auto;
  }
}

.stats .stat {
  background: var(--steel-900);
  padding: var(--space-2) var(--space-2) var(--space-3) 0;
}

@media (min-width: 40rem) {
  .stats .stat {
    padding-left: var(--space-2);
  }
  .stats .stat:first-child {
    padding-left: 0;
  }
}

.stats .stat-value {
  color: var(--steel-100);
}

.stats .stat-label {
  color: var(--steel-400);
  font-size: var(--text-xs);
  line-height: 1.45;
  max-width: 22ch;
}

/* Marcajul de valoare nevalidată: un punct discret, cu explicație la hover. */
.stat-label .unverified::before {
  width: 0.3125rem;
  height: 0.3125rem;
}

/* == 26 Blocuri de pagină de start ========================================= */

.home-split {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 60rem) {
  .home-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

.section-more {
  margin-top: var(--space-3);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-list li {
  font-size: var(--text-sm);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.tag-list__muted {
  color: var(--muted);
  border-style: dashed;
}

.quality-grid--dark .quality {
  background: var(--bluing);
}

.is-dark .quality-grid {
  background: var(--hairline-inverse);
  border-color: var(--hairline-inverse);
}

.is-dark .quality__title {
  color: var(--steel-100);
}

.is-dark .quality__body {
  color: var(--steel-300);
}

.cta-band__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--steel-400);
}

/* Notele comune ale listei de utilaje: o singură dată, mic, sub listă. */
.visualizer__footnotes {
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
}

.is-dark .visualizer__footnotes {
  color: var(--steel-400);
}

.vz-machine__figure {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

.is-dark .vz-machine__figure {
  color: var(--steel-400);
}

.vz-machine__mark {
  font-size: 0.85em;
  line-height: 0;
}

/* == 27 Lanțul de proces =================================================== */

.chain {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 64rem) {
  .chain {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* Desenul rămâne pe ecran cât timp se parcurg pașii: aceeași piesă,
   prelucrată {
  margin: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-2));
}

/* --- Pașii {
  display: grid;
  gap: var(--space-4);
}

/* == 28 Navigația de telefon =============================================== */

/* Sub 1024px navigația principală se ascunde. Butonul acesta o înlocuiește —
   altfel un vizitator de pe telefon nu ar avea niciun link în antet. */
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--steel-100);
  font-size: var(--text-sm);
  transition: background var(--dur-fast);
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 64rem) {
  .menu-toggle {
    display: none;
  }
}

/* Trei linii care devin un „×" la deschidere. Desenate din pseudo-elemente,
   fără pictogramă de încărcat. */
.menu-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-technical),
    top var(--dur-fast);
}

.menu-toggle__bars::before {
  top: 0;
}

.menu-toggle__bars::after {
  top: calc(100% - 1.5px);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--hairline-inverse);
  background: var(--steel-900);
  /* Panoul poate depăși ecranul pe telefoanele mici, în peisaj. */
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  animation: mobile-nav-in var(--dur-base) var(--ease-technical);
}

@media (min-width: 64rem) {
  .mobile-nav {
    display: none;
  }
}

@keyframes mobile-nav-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-nav__inner {
  padding-block: var(--space-2) var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.mobile-nav__list {
  display: grid;
}

.mobile-nav__link {
  display: block;
  /* Ținta de atingere: un deget are nevoie de cel puțin 44px. */
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--hairline-inverse);
  font-size: var(--text-lg);
  color: var(--steel-300);
  transition: color var(--dur-fast);
}

.mobile-nav__link:hover {
  color: var(--steel-100);
}

.mobile-nav__link[aria-current='page'] {
  color: var(--steel-100);
  font-weight: 600;
}

.mobile-nav__cta {
  justify-self: start;
  margin-top: var(--space-1);
}

/* Eticheta stă deasupra comutatorului, nu lângă el. Pe rând, cu
   `align-items: center`, meniul deschis face rândul de trei ori mai înalt și
   duce eticheta la mijlocul lui, plutind lângă nimic — se vede în captura de
   la 390px. Pe coloană, deschis sau închis, arată la fel. */
.mobile-nav__locales {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-inverse);
}

/* În panoul de telefon meniul se deschide în jos, împingând ce e sub el:
   panoul derulează deja pe verticală, iar un strat plutitor în interiorul unui
   container care derulează se taie la marginea lui. */
.mobile-nav__locales .locale-switch__list {
  position: static;
  margin-top: 6px;
  min-width: 0;
}

.mobile-nav__locales .locale-switch__link {
  min-height: 3rem;
}

.mobile-nav__locales .locale-switch__link[aria-current='true'] {
  background: var(--steel-800);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    animation: none;
  }
}

/* Cursorul de anvelopă: o bandă de 16px e imposibil de prins cu degetul. */
.visualizer__slider {
  height: 2.75rem;
  padding-block: 1.125rem;
  cursor: pointer;
}

/* Indicele cardului de calitate pe fundal închis: `--muted` e gândit pentru
   hârtie și dă doar 2,91:1 pe brunare. Pe întuneric urcă o treaptă. */
.is-dark .quality__index {
  color: var(--steel-400);
}

/* Firul Ariadnei pe antet întunecat. `--muted` e calibrat pentru hârtie și dă
   2,80:1 pe grafit — sub pragul AA. Aceeași corecție ca la indicele cardului
   de calitate: pe întuneric, o treaptă mai deschis. */
.is-dark .breadcrumbs,
.is-dark .breadcrumbs li:not(:last-child)::after {
  color: var(--steel-400);
}

.is-dark .breadcrumbs a:hover {
  color: var(--steel-100);
}

/* == 29 Text de mărime constantă în desene ================================= */

/* Problema: textul dintr-un SVG se scalează odată cu viewBox-ul. Desenul
   lanțului de proces are viewBox 900 și se randează pe ~620px, deci o etichetă
   declarată la 13px ajunge la 9px pe ecran — sub pragul de lizibilitate. Pe
   telefon devine și mai mic.

   Mărirea valorii declarate nu rezolvă: ar fi corectă la o singură lățime.

   Soluția: un script pune pe fiecare desen `--svg-scale` = lățime randată /
   lățime viewBox, iar mărimea se împarte la ea. Rezultatul e o cotă care are
   aceeași mărime pe ecran la orice lățime, exact ca pe un desen de execuție
   tipărit, unde cifra nu se micșorează odată cu piesa. */

[data-fit-text] text {
  font-size: calc(13px / var(--svg-scale, 1));
}

[data-fit-text] .vz-dim-text {
  font-size: calc(13px / var(--svg-scale, 1));
  font-weight: 500;
}

/* Etichetele secundare rămân la aceeași mărime ca celelalte: diferența de
   12 față de 13 px nu purta nicio informație {
  font-size: calc(13px / var(--svg-scale, 1));
}

/* Pe ecrane mici cota urcă la 14px: acolo desenul e mai mic, iar cifra e
   singurul lucru care poartă informația. */
@media (max-width: 40rem) {
  [data-fit-text] text {
    font-size: calc(14px / var(--svg-scale, 1));
  }
  [data-fit-text] .vz-dim-text {
    font-size: calc(14px / var(--svg-scale, 1));
  }
}

.colophon__address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* == 30 Stări interactive ================================================== */

/* Trei stări lipseau din foaie, deși codul le producea deja:
   apăsat, dezactivat și în lucru. Lipsa lor nu se vede pe un desktop cu
   mouse — se vede pe telefonul de la târg, unde nu există „hover”, iar
   apăsarea e singurul răspuns pe care îl primește degetul. */

/* --- Apăsat --------------------------------------------------------------
   Deplasare de un pixel, fără tranziție: apăsarea trebuie să pară instantanee.
   O tranziție aici ar întârzia exact răspunsul pe care îl confirmă. */
.button:active:not(:disabled),
.chip:active,
.menu-toggle:active {
  transform: translateY(1px);
  transition-duration: 0s;
}

.button--primary:active:not(:disabled) {
  background: var(--brand-900, var(--brand-800));
}

.button--onDark:active:not(:disabled) {
  background: var(--steel-300);
}

/* Legăturile de text nu se mișcă — mutarea unui rând dintr-un paragraf la
   atingere se citește ca un defect de randare, nu ca un răspuns. */
.prose a:active,
.colophon a:active,
.nav__link:active,
.mobile-nav__link:active {
  opacity: 0.7;
}

/* --- Dezactivat ----------------------------------------------------------
   Butonul de trimitere e dezactivat cât ține cererea. Până acum se schimba
   doar textul, deci un buton care nu mai răspunde arăta identic cu unul care
   răspunde: singura diferență era că nu se întâmpla nimic. */
.button:disabled,
.button[aria-disabled='true'] {
  cursor: not-allowed;
  /* 0,7 și nu mai puțin: butonul dezactivat din acest site e întotdeauna
     butonul în lucru, iar el poartă textul „se trimite”. La 0,55 albul pe
     bleumarin scade la 4,29:1 — sub prag exact pe mesajul care trebuie citit.
     La 0,7 raportul e 7,14:1 și butonul rămâne vizibil stins. */
  opacity: 0.7;
}

/* Fără această regulă, un buton dezactivat s-ar lumina la trecerea mausului
   și ar promite o acțiune pe care nu o mai poate face. */
.button:disabled:hover,
.button--primary:disabled:hover,
.button--secondary:disabled:hover,
.button--onDark:disabled:hover {
  background: inherit;
  border-color: inherit;
}

.button--primary:disabled,
.button--primary:disabled:hover {
  background: var(--brand-700);
}

.button--onDark:disabled,
.button--onDark:disabled:hover {
  background: var(--steel-100);
}

.field__input:disabled {
  cursor: not-allowed;
  background: var(--steel-100);
  opacity: 0.7;
}

/* --- În lucru ------------------------------------------------------------
   `aria-busy` spune cititorului de ecran ce spune inelul care se rotește
   ochiului liber. Ambele sunt necesare; niciunul nu îl înlocuiește pe celălalt. */
.button[aria-busy='true']::before {
  content: '';
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.7s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Cine a cerut mai puțină mișcare primește tot un indiciu vizual — inelul
   incomplet rămâne vizibil, doar că nu se mai rotește. */
@media (prefers-reduced-motion: reduce) {
  .button[aria-busy='true']::before {
    animation: none;
  }
}

/* --- Ținta de atins ------------------------------------------------------
   Butoanele, comutatorul de limbă și cel de meniu au toate 44px. Chipsurile
   de filtrare aveau 36px — destul pentru un maus, puțin pentru un deget.
   Se ridică doar unde arătătorul e imprecis: pe desktop densitatea rândului
   de filtre rămâne cea desenată. */
@media (pointer: coarse) {
  .chip {
    min-height: 2.75rem;
    padding-inline: 1rem;
  }
}

/* == 31 Aliniere optică ==================================================== */

/* Fontul lasă un gol înaintea primei glife, proporțional cu mărimea literei.
   Măsurat pe Archivo: „P” lasă 5,9% din corp. La titlul de 68px asta înseamnă
   4px, la textul de 18px de sub el doar 1px — deci titlul, deși are aceeași
   margine matematică, pare retras cu 3px față de tot ce urmează. Pe o pagină
   unde restul se aliniază la pixel, tocmai cel mai mare element de pe ecran
   e cel care iese din rând.

   Corecția scade flancul propriu al titlului (în em, deci scade odată cu el)
   și adaugă înapoi pixelul textului obișnuit, ca cele două coloane de cerneală
   să înceapă din același loc. O valoare fixă în em ar corecta prea mult pe
   telefon, unde titlul e mai mic. */
.hero__title,
.page-header__title,
.section-head {
  margin-left: calc(-0.058em + 1px);
}

/* Titlurile din interiorul unei casete — panouri, fișe de material — NU se
   corectează: ele se aliniază la marginea cutiei lor, nu la coloana de text.
   Formula de mai sus se auto-anulează oricum la corpuri mici (la 16px dă
   +0,07px), dar selectorul rămâne explicit ca intenția să se vadă. */
.panel__title,
.material__name {
  margin-left: 0;
}

/* == 32 Citirea simulării ================================================== */

/* Din canvasul de design aprobat: deasupra desenului stă o citire scurtă, ca
   pe afișajul unei mașini-unelte — ce operație se execută acum și din ce
   semifabricat iese piesa. Faza se schimbă odată cu pasul. */
.chain__readout {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xs);
  line-height: 1.7;
  color: var(--steel-400);
  text-align: right;
}

.chain__phase {
  color: var(--brand-300);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Pe telefon nu e loc pentru o coloană la dreapta: citirea trece la stânga,
   sub titlu, unde se citește în ordinea firească. */
@media (max-width: 48rem) {
  .chain__readout {
    text-align: left;
  }
}

/* == 33 Cinematica în cinci axe ============================================ */

.kinematics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .kinematics {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.kinematics__stage {
  position: relative;
  height: clamp(260px, 32vw, 380px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.kinematics__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.kinematics__controls {
  display: grid;
  gap: var(--space-2);
}

.kinematics__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.kinematics__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.kinematics__readout dd {
  margin: 0;
}

.kinematics__face,
.kinematics__reach {
  color: var(--brand-700);
  font-size: var(--text-sm);
}

.kinematics__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.kinematics__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 60rem) {
  .kinematics__explain {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

.kinematics__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.kinematics__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 34 Scena procesului (lipită de ecran) ================================= */

/* Structura vine din canvasul de design aprobat: secțiunea e de peste trei ori
   mai înaltă decât ecranul, iar conținutul ei stă lipit cât se derulează prin
   ea. Înălțimea în plus nu e decor — ea E parcursul tăieturii. Fără ea nu ar
   exista derulare din care să iasă un progres. */
.chain-scene {
  position: relative;
  height: 340vh;
  background: var(--bluing);
  color: var(--steel-100);
}

.chain-scene__sticky {
  position: sticky;
  top: var(--header-height);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

.chain-scene__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
  justify-content: space-between;
  padding-top: var(--space-4);
}

.chain-scene__title {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* Pânza primește tot spațiul rămas între antet și carduri. `min-height: 0` e
   obligatoriu: fără el, un copil flexibil refuză să se micșoreze sub
   dimensiunea conținutului și pânza ar împinge cardurile în afara ecranului. */
.chain-scene__stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chain-scene__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Mențiunea că desenul e schematic. Stă sub pânză, pe fundalul de brunare,
   deci are nevoie de un gri deschis: --muted e pentru hârtie. */
/* Subsolul care spune de unde vin cifrele de pe fișele de pas. */
.chain-cards__note {
  max-width: var(--measure);
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xs);
  color: var(--steel-400);
}

.chain-scene__note {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  color: var(--steel-400);
}

.chain-scene__foot {
  padding-bottom: var(--space-3);
}

/* Cele șase fișe de pas.

   Erau o grilă de la orice lățime. Scena e lipită, de înălțimea ecranului și
   cu `overflow: hidden`, deci ce nu încape nu se derulează — dispare. Măsurat
   în browser: la 390px patru fișe din șase erau tăiate, la 768px două. Grila
   încape abia de la 896px, deci banda e forma implicită și grila vine la
   60rem, cu marjă pentru titlurile germane, mai lungi. */
.chain-cards {
  display: flex;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Bara de derulare a benzii ocupă loc pe desktop, iar scena n-are loc de
     dat: măsurat, 15px la lățime clasică. Subțire, ia 7. Pe telefon e
     suprapusă și nu ia niciunul. */
  scrollbar-width: thin;
  background: var(--hairline-inverse);
  border: 1px solid var(--hairline-inverse);
}

.chain-cards > .chain-card {
  flex: 0 0 min(58vw, 14rem);
  scroll-snap-align: start;
}

@media (min-width: 60rem) {
  .chain-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    overflow-x: visible;
  }

  .chain-cards > .chain-card {
    flex: initial;
  }
}

.chain-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--bluing);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.chain-card:hover,
.chain-card.is-active {
  background: var(--bluing-deep);
}

.chain-card.is-active .chain-card__title {
  color: var(--brand-300);
}

.chain-card__index {
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.chain-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color var(--dur-fast);
}

.chain-card__note {
  font-size: var(--text-2xs);
  line-height: 1.5;
  opacity: 0.75;
}

/* Pe ecran mic scena lipită devine o cușcă: șase carduri plus desenul nu încap
   în înălțimea unui telefon. Acolo secțiunea redevine obișnuită, iar desenul
   arată piesa finită. */
@media (max-width: 48rem) {
  .chain-scene {
    height: auto;
  }

  .chain-scene__sticky {
    position: static;
    height: auto;
  }

  .chain-scene__stage {
    height: 46vh;
    min-height: 220px;
    flex: none;
  }

  .chain-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Explicațiile de sub scenă ------------------------------------------- */

.chain-detail__intro {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
}

/* Cele șase operații: coloane explicite, nu `auto-fit`.

   `auto-fit` cu minim 260px dădea patru coloane pe un ecran de 1440 — adică
   4 + 2, cu ultimul rând pe jumătate gol. Șase e 3×2 și 2×3; orice număr de
   coloane care nu împarte exact pe șase lasă un rând ciunt, iar un rând ciunt
   pe pagina unui furnizor de precizie se vede înaintea oricărei cote.

   De aceea pragurile sunt scrise, nu calculate: 1 · 2 · 3, fiecare împărțind
   exact pe șase. La 64rem, o coloană are 320px — peste minimul de 260 pe care
   îl cerea regula dinainte. */
.chain-detail {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .chain-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .chain-detail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chain-detail__item {
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline-inverse);
}

.chain-detail__title {
  margin-top: 0.25rem;
  font-size: var(--text-lg);
  font-weight: 600;
}

.chain-detail__body {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.chain-detail__note {
  margin-top: var(--space-1);
  font-size: var(--text-2xs);
  opacity: 0.75;
}

.chain-detail__machines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
}

/* == 35 Rugozitatea Ra ===================================================== */

.roughness {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .roughness {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.roughness__stage {
  position: relative;
  height: clamp(240px, 30vw, 340px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.roughness__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.roughness__controls {
  display: grid;
  gap: var(--space-2);
}

.roughness__grades {
  margin: 0;
  padding: 0;
  border: 0;
}

.roughness__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

/* Chipul activ își are deja stilul lui în `.chip.is-active` — fundal bleumarin,
   text alb. O regulă proprie aici ar veni mai târziu în cascadă și ar suprascrie
   tocmai albul, lăsând text bleumarin pe fundal bleumarin: un buton gol.

   Punctul marchează treapta pentru care există o cifră în fișa unui utilaj.
   Urmează culoarea textului, ca să rămână vizibil și pe chipul activ. */
.roughness__mark {
  margin-left: 0.25rem;
  color: currentColor;
  font-weight: 700;
}

.roughness__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.roughness__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.roughness__readout dd {
  margin: 0;
  color: var(--brand-700);
  font-size: var(--text-sm);
}

.roughness__definition {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.roughness__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.roughness__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.roughness__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.roughness__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

.roughness__source {
  font-size: var(--text-2xs);
  color: var(--muted);
}

/* == 36 Lanțul de cote ===================================================== */

.stack {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .stack {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.stack__stage {
  position: relative;
  height: clamp(240px, 28vw, 320px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.stack__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stack__controls {
  display: grid;
  gap: var(--space-2);
}

.stack__tolerances {
  margin: 0;
  padding: 0;
  border: 0;
}

.stack__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

.stack__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.stack__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.stack__readout dd {
  margin: 0;
  font-size: var(--text-sm);
}

/* Cifra care nu poate fi depășită se citește în cerneala obișnuită; cea
   statistică în culoarea mărcii — aceleași două culori ca barele din desen,
   ca ochiul să le lege fără legendă. */
.stack__worst {
  color: var(--ink);
}

.stack__rss {
  color: var(--brand-700);
}

.stack__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.stack__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stack__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.stack__subhead {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 37 Decodorul de denumiri ============================================== */

.decode {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .decode {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }
}

.decode__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

/* Fără script, toate fișele stau una sub alta și se citesc ca o listă.
   Clasa `is-enhanced` e pusă de script abia după ce preia comanda — până
   atunci nimic nu se ascunde. */
.decode__panels {
  display: grid;
  gap: var(--space-2);
}

.decode.is-enhanced .decode__panel {
  display: none;
}

.decode.is-enhanced .decode__panel.is-active {
  display: block;
}

.decode__panel {
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
}

.decode__grade {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.decode__meta {
  margin: var(--space-1) 0 0;
}

.decode__reading {
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.decode__parts {
  margin: 0;
}

.decode__none {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--muted);
}

.decode__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.decode__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.decode__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.decode__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 38 Adâncimea parcului ================================================= */

.coverage {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .coverage {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Înălțimea crește cu numărul de utilaje: barele rămân lizibile și când
   parcul se mărește, fără să fie nevoie de o altă valoare aici. */
.coverage__stage {
  position: relative;
  height: clamp(320px, 42vw, 460px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.coverage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.coverage__controls {
  display: grid;
  gap: var(--space-2);
}

.coverage__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.coverage__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.coverage__readout dd {
  margin: 0;
  font-size: var(--text-sm);
}

.coverage__count {
  color: var(--brand-700);
}

.coverage__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-2xs);
  line-height: 1.8;
  color: var(--muted);
}

.coverage__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.coverage__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.coverage__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.coverage__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

.coverage__missing {
  font-size: var(--text-2xs);
  color: var(--muted);
}

/* == 39 Lista de verificare a cumpărătorului =============================== */

.checklist {
  display: grid;
  gap: 1px;
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

/* Capul de coloane. Sub 52rem rândul se despachetează pe verticală, deci un
   cap de tabel n-ar mai corespunde la nimic: apare odată cu coloanele. */
.checklist__head {
  display: none;
  background: var(--paper);
  color: var(--muted);
}

@media (min-width: 52rem) {
  .checklist__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 0.25rem 1rem;
    padding: var(--space-1) var(--space-2);
  }

}

.checklist__item {
  background: var(--paper);
}

/* Rândul întreg e legătura, nu doar un cuvânt din el: ținta de atins e un
   rând de 64px, nu trei cuvinte subliniate. */
.checklist__link {
  display: grid;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: var(--space-2);
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast);
}

@media (min-width: 52rem) {
  .checklist__link {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  }
}

@media (min-width: 52rem) {
  /* Coloanele trebuie să fie ale listei, nu ale fiecărui rând.

     Fiecare rând avea grila lui, iar a treia coloană — cifra — are altă
     lățime pe fiecare: de la 58px la zero. Asta le împingea pe celelalte
     două, iar a doua coloană începea în alt loc pe fiecare rând. Măsurat:
     24px de la primul la ultimul. Pe o pagină care arată unui inginer de
     achiziții că firma lucrează precis, o coloană care șerpuiește se vede.

     `subgrid` face rândurile să împrumute coloanele listei. Unde nu e
     acceptat, declarația se ignoră și rămâne așezarea de dinainte. */
  @supports (grid-template-columns: subgrid) {
    .checklist {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    }

    .checklist__item,
    .checklist__head {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
    }

    .checklist__link {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }
  }
}

.checklist__link:hover {
  background: var(--steel-100);
}

.checklist__check {
  font-weight: 600;
}

.checklist__answer {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

.checklist__figure {
  font-size: var(--text-xs);
  color: var(--brand-700);
  white-space: nowrap;
}

.checklist__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.checklist__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.checklist__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.checklist__subhead {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 40 Piesa finită ======================================================= */

.part {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .part {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    align-items: start;
  }
}

.part__stage {
  position: relative;
  height: clamp(260px, 32vw, 380px);
  border: 1px solid var(--hairline-inverse);
  border-radius: var(--radius);
  background: var(--bluing-deep);
  overflow: hidden;
}

.part__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.part__controls {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.part__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

/* Chipsurile stau pe fundal închis: cele de pe hârtie ar fi invizibile aici.
   Varianta activă se inversează, ca butonul principal de pe antet. */
.chip--onDark {
  gap: 0.5rem;
  border-color: var(--hairline-inverse);
  color: var(--steel-200);
}

.chip--onDark:hover {
  border-color: var(--steel-200);
  color: var(--steel-100);
}

.chip--onDark.is-active {
  background: var(--steel-100);
  border-color: var(--steel-100);
  color: var(--steel-900);
}

.part__readout {
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline-inverse);
}

.part__readout dd {
  margin: 0.25rem 0 0;
}

.part__feature {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--steel-200);
}

.part__note {
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--steel-400);
}

.part__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-inverse);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.part__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.part__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 41 Corecturi pentru ecran îngust ====================================== */

/* Legăturile din subsol aveau 15–19px înălțime: destul pentru un maus, prea
   puțin pentru un deget. Se lărgesc doar unde arătătorul e imprecis, ca
   subsolul de pe desktop să rămână la densitatea desenată. */
@media (pointer: coarse) {
  .colophon__list a {
    display: inline-block;
    padding-block: 0.625rem;
  }
}

/* Eticheta anvelopei, mutată din desen sub el: ca text HTML se rupe pe rânduri
   și rămâne întreagă pe orice lățime.

   Culoarea era `--steel-400`: pe alb dă **2,37:1**, la 11px. WCAG 2.2 AA cere
   4,5:1 pentru text normal, iar blueprint-ul o listează ca risc. Eticheta
   spune ce anvelopă se vede pe desen — nu e decor. `--muted` dă 6,30:1. */
.visualizer__envelope {
  margin-top: 0.25rem;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--muted);
}

/* == 42 Pragul navigației, măsurat ========================================= */

/* Prima verificare la 1024px a arătat că navigația de desktop apărea înainte
   să încapă: antetul cerea 1266px, iar pagina derula lateral pe orice laptop
   între 1024 și 1280. Pragul era ales din obișnuință, nu din măsurătoare.

   Subtitlul siglei ocupa 187px și era ascuns sub 1280, ca navigația să încapă
   de la 68rem. Clientul l-a scos cu totul (It. 100), deci cei 187px sunt acum
   liberi pe orice lățime, iar pragul de 68rem de mai jos rămâne valabil cu
   marjă în plus — nu mai are nimic de ascuns ca să-l atingă. */

/* Navigația principală: nu de la 64rem, ci de la lățimea la care intră. */
@media (min-width: 64rem) and (max-width: 67.99rem) {
  .nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* Un element de grilă are implicit `min-width: auto`, deci refuză să se
   micșoreze sub lățimea conținutului său. Cu o valoare de specificație pe care
   scrie `nowrap`, coloana ajungea la 536px într-un ecran de 360 și pagina
   derula lateral. Ambele capete ale lanțului se taie aici. */
.decode__picker,
.decode__panels {
  min-width: 0;
}

/* Rândul de cotă are trei coloane — etichetă, linie punctată, valoare — și
   nu se poate micșora sub ele. Cu o etichetă germană lungă, la 320px rândul
   ieșea din ecran cu 26px. Pe lățime mică rândul se așază pe două linii:
   linia punctată nu mai are ce lega, deci dispare. */
@media (max-width: 40rem) {
  .spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }

  .spec-leader {
    display: none;
  }

  .spec-value {
    white-space: normal;
    text-align: left;
  }
}

/* == 43 Viteza de așchiere ================================================= */

.cutting {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .cutting {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.cutting__stage {
  position: relative;
  height: clamp(240px, 30vw, 340px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.cutting__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cutting__controls {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.cutting__readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.cutting__readout dd {
  margin: 0;
}

.cutting__count {
  color: var(--brand-700);
  font-size: var(--text-sm);
}

.cutting__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-2xs);
  line-height: 1.8;
  color: var(--muted);
}

.cutting__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.cutting__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cutting__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.cutting__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 44 Incertitudinea măsurării =========================================== */

.uncert {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .uncert {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.uncert__stage {
  position: relative;
  height: clamp(220px, 26vw, 300px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.uncert__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.uncert__controls {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.uncert__readout {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.uncert__readout div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.uncert__readout dd {
  margin: 0;
  font-size: var(--text-sm);
}

.uncert__accept {
  color: var(--brand-700);
}

.uncert__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.uncert__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.uncert__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.uncert__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 45 Semifabricatul pe ferăstrău ======================================== */

.stock {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (min-width: 60rem) {
  .stock {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

.stock__stage {
  position: relative;
  height: clamp(240px, 28vw, 320px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}

.stock__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stock__controls {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.stock__shapes {
  margin: 0;
  padding: 0;
  border: 0;
}

.stock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-1);
}

.stock__pair {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.stock__readout {
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--hairline);
}

.stock__readout dd {
  margin: 0.25rem 0 0;
}

.stock__result {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--brand-700);
}

/* Când nu intră pe niciunul, răspunsul nu se colorează ca o reușită. */
.stock__result.is-none {
  color: var(--muted);
}

.stock__note {
  max-width: var(--measure);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--muted);
}

.stock__explain {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.stock__explain p {
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.stock__subhead {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* == 46 Atributul `hidden` bate orice display ============================== */

/* Browserul dă `[hidden] { display: none }`, dar regula lui are cea mai mică
   specificitate: orice `display` scris de noi o învinge. Așa s-a întâmplat cu
   `.field`, care e `display: grid` — câmpul rămânea pe ecran deși scriptul îl
   marcase ascuns.

   `!important` e justificat aici — al doilea și ultimul loc din foaie, după
   blocul de mișcare redusă:
   `hidden` înseamnă ascuns, fără excepții. Un element pe care îl marcăm ascuns
   și care totuși se vede e o minciună spusă deopotrivă ochiului și cititorului
   de ecran, fiindcă `hidden` îl scoate și din arborele de accesibilitate. */
[hidden] {
  display: none !important;
}

/* Avertisment de exploatare în panou: cererile intră, dar notificarea nu
   pleacă. Se colorează ca o atenționare, nu ca o eroare — sistemul
   funcționează, doar că tăcut. */
.admin__alert {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  border-left: 3px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.admin__alert code {
  padding: 0.1em 0.3em;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Creditele foto de pe pagina legală. */
.credits {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: 1.7;
}

.credits__item + .credits__item {
  margin-top: 0.375rem;
}

/* Marcajul care spune că fotografia nu e din hala METALPET. Nu e o notă de
   subsol: stă lipită de creditul ei, fiindcă asta e informația care împiedică
   o citire greșită. */
.credits__stock {
  margin-left: 0.375rem;
  padding: 0.1em 0.4em;
  border-radius: var(--radius);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.credits__empty {
  color: var(--muted);
}

/* == 47 Clase care au înlocuit stilurile din marcaj ======================== */

/* Cele cinci atribute `style=` din vederi erau singurul motiv pentru care
   politica de securitate trebuia să accepte `'unsafe-inline'` la stiluri.
   Mutate aici, `style-src` a putut fi strâns la `'self'`. Stilurile puse din
   JavaScript prin CSSOM nu sunt atinse de această restricție. */

.not-found__title {
  margin-top: var(--space-2);
}

.not-found__body {
  margin-top: var(--space-3);
}

.not-found__action {
  margin-top: var(--space-4);
}

.colophon__logo {
  height: 38px;
  width: auto;
}

.colophon__blurb {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

/* == 48 Butonul de meniu apare abia cu script ============================== */

/* Butonul se vedea mereu, dar fără JavaScript nu deschidea nimic: pe telefon,
   antetul avea un singur link — sigla — plus un buton mut. Acum panoul vine
   deschis din server, iar butonul apare doar după ce scriptul poate să-l
   plieze. Un buton care promite un meniu trebuie să aibă un meniu. */
.menu-toggle {
  display: none;
}

.has-menu-toggle .menu-toggle {
  display: flex;
}

/* Peste pragul navigației complete, butonul dispare oricum. */
@media (min-width: 68rem) {
  .has-menu-toggle .menu-toggle {
    display: none;
  }
}

/* Fără script, panoul e o listă obișnuită sub siglă — nu un panou suprapus. */
.mobile-nav {
  position: static;
}

.has-menu-toggle .mobile-nav {
  position: relative;
}

@media (min-width: 68rem) {
  .mobile-nav {
    display: none;
  }
}

/* == 49 Scena procesului fără script ====================================== */

/* Scena e înaltă fiindcă înălțimea ei ESTE parcursul tăieturii. Fără script,
   pânza rămâne goală, iar cele 3,4 ecrane devin 1871px de nimic — cardurile și
   explicațiile se văd, dar drumul până la ele e pustiu.

   Așa că înălțimea se dă doar când există cine să o folosească. Restul —
   titlul, citirea, cele șase carduri, explicațiile de dedesubt — rămâne
   neschimbat în ambele cazuri. */
.chain-scene {
  height: auto;
}

.has-js .chain-scene {
  height: 340vh;
}

.chain-scene__sticky {
  position: static;
  height: auto;
}

.has-js .chain-scene__sticky {
  position: sticky;
  height: calc(100vh - var(--header-height));
}

/* O pânză goală cu chenar nu spune nimic; fără script nu se afișează deloc. */
.chain-scene__stage {
  display: none;
}

.has-js .chain-scene__stage {
  display: block;
}

/* == 50 Demonstrațiile interactive fără script ============================ */

/* Fiecare demonstrație are trei părți care există numai prin JavaScript:
   pânza pe care se desenează, comenzile care o schimbă și citirea rezultatului.
   Fără script, ele devin o cutie goală cu chenar și niște cursoare care nu se
   mișcă — exact greșeala butonului de meniu, repetată de opt ori.

   Explicațiile rămân: ele poartă informația. Schema e un ajutor de înțelegere,
   nu purtătorul ei — acum și în fapt, nu doar în comentariu. */
html:not(.has-js) .part__stage,
html:not(.has-js) .kinematics__stage,
html:not(.has-js) .roughness__stage,
html:not(.has-js) .cutting__stage,
html:not(.has-js) .stock__stage,
html:not(.has-js) .uncert__stage,
html:not(.has-js) .stack__stage,
html:not(.has-js) .coverage__stage,
html:not(.has-js) .visualizer__stage,
html:not(.has-js) .part__controls,
html:not(.has-js) .kinematics__controls,
html:not(.has-js) .roughness__controls,
html:not(.has-js) .cutting__controls,
html:not(.has-js) .stock__controls,
html:not(.has-js) .uncert__controls,
html:not(.has-js) .stack__controls,
html:not(.has-js) .coverage__controls,
html:not(.has-js) .visualizer__controls,
html:not(.has-js) .decode__picker {
  display: none;
}

/* Mesajul din `<noscript>` ia locul lor: spune ce lipsește și unde sunt
   cifrele, în loc să lase o secțiune care începe cu „mutați cursorul”. */
.noscript-note {
  margin: var(--space-3) 0;
  padding: var(--space-2);
  border-left: 3px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* == 51 Fișa de capabilitate ============================================== */

/* Pagina e gândită întâi pentru hârtie: un inginer de achiziții o tipărește și
   o pune la dosarul de furnizor. De aceea blocurile nu se rup între pagini și
   îndrumarea de tipar dispare la tipar — acolo cititorul a tipărit deja. */

/* `.profile` stă pe același element cu `.shell`, care se centrează singur.
   Un `max-width` aici ar îngusta containerul și ar împinge tot conținutul
   spre mijloc — titlul paginii rămânea la stânga, fișa aluneca la dreapta.
   Lățimea de citire se pune pe blocuri, nu pe container. */
.profile__block > .spec-list,
.profile__hint,
.profile__inline,
.profile__source,
.profile__note {
  /* Era 62rem, adică în jur de 130 de caractere pe rând — prea lat pentru
     propoziții pe care cineva chiar le citește, chiar și pe o fișă densă. */
  max-width: var(--measure);
}

.profile__block {
  margin-block-start: var(--space-6);
  break-inside: avoid;
  page-break-inside: avoid;
}

.profile__block:first-of-type {
  margin-block-start: var(--space-4);
}

.profile__hint {
  margin-block-end: var(--space-5);
  padding: var(--space-3);
  border-left: 3px solid var(--brand-700);
  background: var(--brand-100);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.profile__facts {
  display: grid;
  gap: var(--space-3);
}

.profile__fact dd {
  margin: 0;
  color: var(--ink);
}

.profile__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

/* Aceleași 24 de pixeli ca în subsol: legăturile aveau 17px înălțime. */
/* `.profile__inline a` NU intră aici: acolo legătura stă la capătul unei
   propoziții, iar 2.5.8 are excepție pentru ținte din text curgător. Padding
   pe ea ar umfla rândul fără să câștige nimic. */
.profile__list a {
  display: inline-block;
  padding-block: 0.25rem;
}

.profile__inline {
  margin: 0;
  line-height: 1.7;
}

.profile__note,
.profile__source,
.profile__issued {
  margin-block-start: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--muted);
}

.profile__source {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--hairline);
}

.profile__issued {
  margin-block-start: var(--space-2);
}

@media (min-width: 48rem) {
  .profile__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .profile__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ce are rost pe ecran, dar nu pe hârtie. */
@media print {
  .screen-only {
    display: none !important;
  }

  .profile__block {
    margin-block-start: 8mm;
  }

  /* Tabelul cu parcursul unui reper.

     Pe ecran are `min-width: 44rem` și se derulează lateral în cutia lui.
     Pe hârtie nu există derulare: 44rem înseamnă 704px, iar lățimea
     tipăribilă a unei pagini A4 cu margini obișnuite e sub atât — tabelul
     ar ieși din pagină și s-ar tăia exact coloana care spune ce lasă fiecare
     operație mai departe. Fără lățime minimă, se strânge singur. */
  .prose-table {
    min-width: 0 !important;
    font-size: 9pt;
  }

  .prose-table-wrap {
    overflow: visible !important;
    /* Umbra spune „mai e conținut dacă derulezi”. Pe hârtie nu derulează
       nimeni, deci ar fi doar o dungă gri la marginea tabelului. */
    background-image: none !important;
  }

  /* Un rând de tabel sau un bloc explicativ tăiat de saltul de pagină se
     citește de două ori și se înțelege o dată. */
  .prose-table tr,
  .figures tr,
  .yield-draw,
  .capability__item,
  .modes__item,
  .onboarding__step,
  .routing__pair,
  .material {
    break-inside: avoid;
  }
}