/* ============================================================================
   curriculum.css — «Consultar el currículum»

   No és una làmina. Aquí la feina no és mirar: és consultar, trobar, entendre i
   tornar. Per això hi ha poc color, molt aire i una sola cosa a la pantalla cada
   vegada.

   La regla del projecte per a les pantalles: només desplaçament vertical. Cap
   amplada fixa, cap graella que no es pugui encongir.
   ========================================================================== */

.curriculum { padding: var(--e-7) 0 var(--e-8); }
.curriculum :is(section, div, ul, li, p, h1, h2, h3) { min-width: 0; }
.curriculum :is(p, li, h1, h2, h3, code) { overflow-wrap: break-word; }

/* ── Capçalera ─────────────────────────────────────────────────────────────── */
.cur-cap { max-width: 62ch; margin-bottom: var(--e-7); }
.cur-cap h1 { font-size: var(--mida-3xl); margin-bottom: var(--e-3); }
.cur-cap .entradeta {
  font-size: var(--mida-l);
  color: var(--text-suau);
  margin-bottom: var(--e-5);
}
.cur-font { font-size: var(--mida-s); color: var(--text-tenue); margin-bottom: var(--e-4); }

.cur-xifres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  margin: 0 0 var(--e-5);
  padding: 0;
  list-style: none;
}
.cur-xifres li { display: flex; align-items: baseline; gap: var(--e-2); }
.cx-n { font-size: var(--mida-xl); font-weight: 900; color: var(--blau-text); }
.cx-t { font-size: var(--mida-s); color: var(--text-suau); }

/* ── Text oficial i nota de la guia ────────────────────────────────────────
   La distinció més important de tota la pantalla. El text del Decret va amb
   filet i sense adorns; el que hi afegeix la guia va en gris, en cursiva i amb
   una altra vora. Qui llegeix ha de poder dir en un cop d'ull qui parla. */
.oficial {
  margin: 0 0 var(--e-3);
  padding-left: var(--e-4);
  border-left: 3px solid var(--blau);
  font-size: var(--mida-m);
  line-height: 1.6;
  color: var(--text);
}
.nota-guia {
  margin: 0 0 var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-left: 3px dotted var(--linia-forta);
  border-radius: 0 var(--radi-s) var(--radi-s) 0;
  background: var(--fons-alt);
  font-size: var(--mida-s);
  font-style: italic;
  line-height: 1.55;
  color: var(--text-suau);
}
.cur-avis { max-width: 62ch; }

/* ── Procedència ───────────────────────────────────────────────────────────
   «pàg. X del PDF» i no «del DOGC»: és la pàgina dins del PDF del Decret, que és
   el que hi ha a les dades. Vegeu scripts/10-genera-curriculum.py. */
.proc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  font-size: var(--mida-xs);
  color: var(--text-tenue);
}
.proc-tipus {
  padding: 2px 8px;
  border-radius: var(--radi-ple);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.proc-normativa .proc-tipus, .proc-mostra.proc-normativa {
  background: var(--blau-vel); color: var(--blau-text);
}
.proc-orientacio .proc-tipus, .proc-mostra.proc-orientacio {
  background: var(--mel-vel); color: var(--mel-text);
}
.cur-llegenda { font-size: var(--mida-s); color: var(--text-suau); max-width: 62ch; }
.proc-mostra { display: inline-block; margin-right: 4px; font-size: var(--mida-xs); }

/* ── Molla de pa ───────────────────────────────────────────────────────────── */
.molla { margin-bottom: var(--e-5); }
.molla ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--mida-s);
}
.molla li + li::before { content: "›"; margin-right: var(--e-2); color: var(--text-tenue); }
.molla a { color: var(--blau-text); text-decoration: none; border-bottom: 1px solid transparent; }
.molla a:hover { border-bottom-color: currentColor; }
.molla [aria-current] { font-weight: 800; }

/* ── Vista ─────────────────────────────────────────────────────────────────── */
.cur-h { font-size: var(--mida-2xl); margin: 0 0 var(--e-4); max-width: 40ch; }
/* En canviar de vista, el focus va al títol perquè qui navega amb teclat o amb
   lector de pantalla sàpiga que la pantalla ha canviat. El senyal ha de ser
   visible, però discret: no és un botó. */
.cur-h:focus-visible { outline: 2px solid var(--verd); outline-offset: 6px; border-radius: 4px; }
.cur-h-saber { font-size: var(--mida-l); color: var(--text-suau); }
.cur-sub {
  margin: var(--e-7) 0 var(--e-4);
  font-size: var(--mida-s);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blau-text);
}
.cur-ajuda { color: var(--text-suau); max-width: 62ch; margin-bottom: var(--e-5); }
.cur-vista > .oficial, .cur-vista > .nota-guia { max-width: 68ch; }

/* Targetes de navegació: una per fill. Es reparteixen soles i no tenen amplada
   mínima en píxels, que és el que provoca desbordaments en pantalles estretes. */
.cur-graella {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}
@media (min-width: 46rem) { .cur-graella { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cur-targeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--linia);
  border-radius: var(--radi-l);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.cur-targeta:hover { border-color: var(--blau); box-shadow: var(--ombra-1); transform: translateY(-2px); }
.cur-targeta:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
.ct-retolet {
  grid-column: 1;
  font-size: var(--mida-xs);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blau-text);
}
.ct-titol { grid-column: 1; font-size: var(--mida-m); font-weight: 700; line-height: 1.45; }
.ct-peu { grid-column: 1; font-size: var(--mida-s); color: var(--text-suau); }
.ct-fletxa { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--blau); font-size: var(--mida-l); }
.cur-extra { margin-bottom: var(--e-5); }

/* ── Llistes de sabers i de criteris ───────────────────────────────────────── */
.cur-llista { margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.cur-llista > li {
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linia);
}
.cur-llista > li:last-child { border-bottom: 0; }
.cur-mes { margin: 0; font-size: var(--mida-s); }
.cur-mes a { color: var(--blau-text); }
.cur-bloc { margin-bottom: var(--e-6); }
.cur-bloc h3 { font-size: var(--mida-m); margin-bottom: var(--e-3); }

.avis-criteris {
  margin: 0 0 var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radi-m);
  background: var(--pressec-vel);
  color: var(--pressec-text);
  font-size: var(--mida-s);
  font-weight: 700;
  line-height: 1.5;
  max-width: 68ch;
}

/* ── I0 / I1 / I2 ──────────────────────────────────────────────────────────
   Sempre amb la paraula «Orientació» al davant. El Decret no divideix els sabers
   per nivells i la interfície no pot donar a entendre el contrari. */
.edats {
  margin: var(--e-4) 0;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--mel-fons);
  border-radius: var(--radi-m);
  background: var(--mel-vel);
}
.edats-cap { margin: 0 0 var(--e-3); font-size: var(--mida-s); color: var(--mel-text); }
.marca-orientacio, .edat-marca .marca-orientacio {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: var(--radi-ple);
  background: var(--mel);
  color: #fff;
  font-size: var(--mida-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.edats-llista { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.edat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radi-ple);
  background: var(--fons);
  font-size: var(--mida-xs);
}
.edat-n { font-weight: 900; }
.edat-si .edat-n { color: var(--verd-text); }
.edat-no { opacity: .72; }
.edat-v { color: var(--text-suau); }
.edat-marca { margin: var(--e-2) 0 0; font-size: var(--mida-xs); color: var(--text-suau); }

.cur-ident {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-6);
  font-size: var(--mida-xs);
  color: var(--text-tenue);
}
.cur-ident code {
  padding: 2px 8px;
  border-radius: var(--radi-s);
  background: var(--fons-alt);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cur-enrere { margin-top: var(--e-6); font-size: var(--mida-s); }
.cur-enrere a { color: var(--blau-text); }
.cur-saber-item .oficial { margin-bottom: var(--e-2); }

/* ── L'arbre sense JavaScript ──────────────────────────────────────────────── */
.cur-arbre details {
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  background: var(--superficie);
  margin-bottom: var(--e-3);
}
.cur-arbre summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-4) var(--e-5);
  cursor: pointer;
  font-weight: 700;
  min-height: var(--area-tactil);
}
.cur-arbre summary:focus-visible { outline: 3px solid var(--verd); outline-offset: -3px; }
.ar-etiqueta { color: var(--blau-text); font-size: var(--mida-s); font-weight: 900; }
.ar-n { font-size: var(--mida-xs); color: var(--text-tenue); font-weight: 600; }
.ar-cos { padding: 0 var(--e-5) var(--e-5); }
.ar-sabers, .ar-llista { margin: 0; padding: 0; list-style: none; }
.ar-sabers > li, .ar-llista > li { padding: var(--e-3) 0; border-top: 1px solid var(--linia); }
.ar-segon { font-size: var(--mida-xs); color: var(--text-tenue); }
.arbre-nota { max-width: 62ch; margin-bottom: var(--e-5); }

/* ── El cercador ──────────────────────────────────────────────────────────
   Sempre visible: és el que converteix la pantalla en una eina i no en un índex.
   El construeix curriculum.js, de manera que qui no tingui JavaScript no en veu
   una caixa morta. */
.cur-cercador {
  margin-bottom: var(--e-5);
  padding: var(--e-5);
  border: 1px solid var(--linia);
  border-radius: var(--radi-l);
  background: var(--superficie);
}
.cc-form { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.cc-camp { flex: 1 1 18rem; min-width: 0; }
.cc-etiqueta {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--mida-xs);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blau-text);
}
.cc-camp input {
  width: 100%;
  min-height: var(--area-tactil);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linia-forta);
  border-radius: var(--radi-ple);
  background: var(--fons);
  font: inherit;
  color: inherit;
}
.cc-camp input:focus-visible { outline: 3px solid var(--verd); outline-offset: 2px; }
.cc-neteja {
  min-height: var(--area-tactil);
  padding: 0 var(--e-5);
  border: 1px solid var(--linia-forta);
  border-radius: var(--radi-ple);
  background: var(--fons);
  font: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.cc-neteja:hover { background: var(--verd-vel); }
.cc-filtres { margin-top: var(--e-4); }
.cc-filtres summary {
  min-height: var(--area-tactil);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
  cursor: pointer;
}
.cc-n {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radi-ple);
  background: var(--verd);
  color: #fff;
  font-size: var(--mida-xs);
  font-weight: 800;
  text-align: center;
}
.cc-filtres .filtre-grup { border: 0; margin: var(--e-4) 0 0; padding: 0; }
.cc-filtres legend { padding: 0; font-size: var(--mida-s); font-weight: 800; }
.cc-filtres .filtre-ajuda { margin: var(--e-2) 0 var(--e-3); font-size: var(--mida-xs); color: var(--text-suau); max-width: 56ch; }
.cc-filtres .pastilles { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* base.css limita els paràgrafs i les llistes a --mesura (34rem) perquè les línies
   de text no s'estirin. Aquí les llistes són FILERES de resultats, no text seguit:
   la filera ha d'ocupar tot l'ample —si no, les línies separadores s'aturen a mitja
   pantalla i sembla que la pàgina s'hagi trencat— i qui es limita és el text de
   dins. */
.cur-llista, .cur-resultats, .cur-usos, .cur-graella, .cur-xifres, .edats-llista,
.molla ol, .cc-filtres .pastilles { max-width: none; }
.cur-llista .oficial, .cr-text, .cur-llista .nota-guia { max-width: 72ch; }

/* ── Resultats ─────────────────────────────────────────────────────────────── */
.cur-resultats { margin: 0; padding: 0; list-style: none; }
.cur-resultats li { border-bottom: 1px solid var(--linia); }
.cur-resultats li:last-child { border-bottom: 0; }
.cur-resultats a {
  display: block;
  padding: var(--e-4) var(--e-3);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radi-s);
}
.cur-resultats a:hover { background: var(--blau-vel); }
.cur-resultats a:focus-visible { outline: 3px solid var(--verd); outline-offset: -3px; }
.cr-text { display: block; line-height: 1.55; }
.cr-cami { display: block; margin-top: 4px; font-size: var(--mida-xs); color: var(--text-tenue); }
.cur-resultats mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--mel-fons);
  color: inherit;
}
.cb-n {
  margin-left: var(--e-2);
  padding: 1px 8px;
  border-radius: var(--radi-ple);
  background: var(--fons-alt);
  font-size: var(--mida-xs);
  color: var(--text-suau);
}
.avis-orientacio {
  margin: 0 0 var(--e-5);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--radi-m);
  background: var(--mel-vel);
  color: var(--mel-text);
  font-size: var(--mida-s);
  line-height: 1.55;
  max-width: 68ch;
}

/* ── On es fa servir un saber ──────────────────────────────────────────────── */
.cur-usos { margin: 0 0 var(--e-5); padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.cur-usos a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  background: var(--verd-vel);
  color: inherit;
  text-decoration: none;
}
.cur-usos a:hover { border-color: var(--verd); }
.cur-usos a:focus-visible { outline: 3px solid var(--verd); outline-offset: 3px; }
.cu-titol { font-weight: 700; }
.cu-meta { font-size: var(--mida-xs); color: var(--text-suau); }
.cur-marques { margin: 0 0 var(--e-2); font-size: var(--mida-xs); color: var(--text-suau); }
.marca-us {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radi-ple);
  background: var(--verd-vel);
  color: var(--verd-text);
  font-weight: 800;
}

/* ── Capçalera compacta quan s'entra a dins ────────────────────────────────
   Les xifres i l'avís general són per a l'entrada. A dins fan baixar el
   contingut sense aportar-hi res: qui hi ha arribat ja els ha llegit. */
.cur-dins .cur-xifres,
.cur-dins .cur-avis,
.cur-dins .cur-cap .entradeta { display: none; }
.cur-dins .cur-cap { margin-bottom: var(--e-5); }
.cur-dins .cur-cap h1 { font-size: var(--mida-xl); margin-bottom: var(--e-2); }