/* calc.css — Calculadora de nota (pantalla pròpia, mobile-first).
   NOMÉS var(--...) del tokens.css. Resultat "enganxat" a dalt mentre s'omplen
   les notes perquè sempre sigui visible al mòbil. */

.calc-intro { color: var(--text-muted); margin-top: 0; }

/* ---- Resultat (hero) ----
   L'embolcall és el que s'enganxa: deixa un marge a dalt (padding-top) i tapa
   amb el fons de la pàgina el contingut que passa per darrere, de manera que la
   targeta "flota" amb aire a la part superior en comptes d'arran de la pantalla. */
.calc-hero {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-top: var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--bg);
}
.calc-hero-card {
  padding: var(--space-4);
  background: var(--blau-tint);
  border: var(--border-width) solid var(--linia-forta);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.calc-hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.calc-hero-label {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--size-sm); letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-muted);
}
.calc-hero-value {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display); line-height: 1;
  display: flex; align-items: baseline; gap: var(--space-2);
}
.calc-hero-value output {
  font-size: 3.4rem; font-weight: var(--weight-display);
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.calc-hero-max { font-size: var(--size-lg); color: var(--text-muted); font-weight: var(--weight-bold); }

.calc-hero-sub {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  padding-top: var(--space-3); border-top: var(--border-width) solid var(--linia-forta);
}
.calc-hero-sub > div { display: flex; flex-direction: column; gap: 2px; }
.calc-hero-sub span { font-size: var(--size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.calc-hero-sub b { font-family: var(--font-display); font-size: var(--size-xl); font-variant-numeric: tabular-nums; }
.calc-hero-sub small { font-size: var(--size-sm); color: var(--text-muted); font-weight: var(--weight-normal); }
.calc-hero-hint { margin: var(--space-3) 0 0; font-size: var(--size-sm); color: var(--text-muted); }
.calc-hero-hint:empty { display: none; }

/* Veredicte apte / no apte (paraula + color de correcció) */
.calc-badge {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--size-sm); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); white-space: nowrap;
}
.calc-badge.is-apte   { background: var(--encert-tint); color: var(--encert-text); }
.calc-badge.is-noapte { background: var(--error-tint);  color: var(--error-text);  }

/* ---- Formulari ---- */
.calc-form { display: grid; gap: var(--space-5); }
.calc-block {
  margin: 0; border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
  padding: var(--space-4);
}
.calc-block legend {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--size-lg); padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2));
}
.calc-block legend small { font-family: var(--font-sans); font-weight: var(--weight-normal); font-size: var(--size-sm); color: var(--text-muted); }

.calc-field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.calc-field + .calc-field { border-top: var(--border-width) solid var(--border); }
.calc-field > span { color: var(--text); font-size: var(--size-base); }
.calc-field em { font-style: normal; color: var(--text-muted); }
.calc-field input, .calc-field select {
  flex: none; width: 5.2rem; text-align: center;
  padding: var(--space-2); font-size: var(--size-lg); font-variant-numeric: tabular-nums;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); min-height: var(--tap-target);
}
.calc-field select { width: 6.4rem; font-size: var(--size-base); }
.calc-field--wide input { width: 6.4rem; }
.calc-field input:focus-visible, .calc-field select:focus-visible { border-color: var(--accent); }

/* Fase específica */
.calc-note { font-size: var(--size-sm); color: var(--text-muted); margin-top: 0; }
.calc-spec { padding-top: var(--space-3); }
.calc-spec + .calc-spec { margin-top: var(--space-2); border-top: var(--border-width) solid var(--border); }
.calc-spec-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--size-base); color: var(--text);
}
.calc-spec-row { display: flex; align-items: end; gap: var(--space-3); }
.calc-spec-row .calc-field { flex-direction: column; align-items: stretch; gap: var(--space-1); padding-block: 0; }
.calc-spec-row .calc-field + .calc-field { border-top: 0; }
.calc-spec-row .calc-field > span { font-size: var(--size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.calc-spec-row .calc-field input, .calc-spec-row .calc-field select { width: 100%; }
.calc-spec-sum {
  margin-left: auto; min-width: 4.5rem; text-align: right;
  font-family: var(--font-mono); font-size: var(--size-lg); font-variant-numeric: tabular-nums;
  color: var(--accent); font-weight: var(--weight-bold); padding-bottom: var(--space-2);
}
.calc-spec-sum.is-off { color: var(--text-muted); }

.calc-reset {
  margin-top: var(--space-4); width: 100%;
  padding: var(--space-2) var(--space-4); min-height: var(--tap-target);
  background: var(--surface); color: var(--text-muted);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--size-base); cursor: pointer;
}
.calc-reset:hover { color: var(--danger); border-color: var(--danger); }

/* Ajuda */
.calc-help { margin-block: var(--space-6) var(--space-8); }
.calc-help h2 { font-size: var(--size-lg); margin-block: 0 var(--space-2); }
.calc-help-body { color: var(--text-muted); font-size: var(--size-sm); }
.calc-help-body b { color: var(--text); }
.calc-help-warn {
  color: var(--text); background: var(--surface-alt);
  border-left: var(--border-width-strong) solid var(--accent);
  padding: var(--space-3); border-radius: var(--radius-sm);
}
.calc-help-src { font-size: var(--size-xs); }

@media (min-width: 40rem) {
  .calc-hero-value output { font-size: 4rem; }
}