/* base.css — maquetació estructural. NOMÉS var(--...) del tokens.css.
   (Els punts de tall de media queries són l'única excepció: les custom
   properties no funcionen dins @media.) */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

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

/* El fons de la portada (.bg-grid) va darrere; el contingut, al davant. */
.site-header, main.container, .site-footer { position: relative; z-index: 1; }

a { color: var(--accent); }

:focus-visible { outline: none; box-shadow: var(--ombra-focus); border-radius: var(--radius-sm); }

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: -.01em; }
h1 { font-size: var(--size-2xl); line-height: var(--leading-tight); font-weight: var(--weight-display); margin-block: var(--space-5) var(--space-4); }
h2 { font-size: var(--size-xl); line-height: var(--leading-tight); margin-block: var(--space-6) var(--space-2); }
h3 { font-size: var(--size-lg); line-height: var(--leading-tight); }
p { margin-block: var(--space-3); }

img, svg, figure { max-width: 100%; height: auto; }
figure { margin: 0; }

/* Capçalera i peu */
.site-header, .site-footer { background: var(--surface); }
/* La capçalera blanca puja fins al notch (àrea segura superior de l'iPhone). */
.site-header {
  border-bottom: var(--border-width) solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}
/* El peu és una targeta blanca flotant: marge als costats i a baix (respectant
   l'àrea segura inferior) i cantonades arrodonides. */
.site-footer {
  color: var(--text-muted);
  font-size: var(--size-sm);
  margin: var(--space-9) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.site-header .container, .site-footer .container { padding-block: var(--space-3); }
.brand { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-lg); text-decoration: none; color: var(--accent); }
main.container { padding-block: var(--space-5); }

/* Objectius tàctils mínims */
nav a, .btn, button, select, summary { min-height: var(--tap-target); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  text-decoration: none;
}
.btn.primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Rastre de molla */
.breadcrumb { color: var(--text-muted); font-size: var(--size-sm); margin-bottom: var(--space-3); }

/* Llistes de navegació (assignatures, temes, exercicis) */
.nav-list { list-style: none; padding-left: 0; margin: 0; }
.nav-list li { border-bottom: var(--border-width) solid var(--border); }
.nav-list a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding-block: var(--space-3);
  min-height: var(--tap-target); text-decoration: none; color: var(--text);
}
.nav-list a:hover { color: var(--accent); }
.count { color: var(--text-muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--size-sm); }
.apoyo { font-size: var(--size-sm); color: var(--text-muted); }
.home-sim { margin-top: var(--space-7); }
.home-groups { display: grid; gap: var(--space-6); }

/* Eines destacades des de la portada (calculadora, notes de tall) */
.home-ctas { display: grid; gap: var(--space-3); margin-block: var(--space-5) var(--space-7); }
@media (min-width: 34rem) { .home-ctas { grid-template-columns: 1fr 1fr; } }
.home-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--accent); color: var(--accent-contrast);
  border-radius: var(--radius-lg); text-decoration: none;
  box-shadow: var(--shadow-md);
}
.home-cta:hover { background: var(--blau-fort); }
.home-cta-text { display: flex; flex-direction: column; gap: 2px; }
.home-cta-main { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--size-lg); }
.home-cta-sub { font-size: var(--size-sm); opacity: .9; }
.home-cta-arrow { font-size: var(--size-xl); flex: none; }
/* Portada a l'ordinador: la fase general a tota l'amplada (amb la llista en dues
   columnes) i la resta de grups de dos en dos, alineats amb les eines de dalt. */
@media (min-width: 52rem) {
  body.home .container { max-width: 62rem; }
  .home-ctas, .home-groups { column-gap: var(--space-6); }
  .home-groups { grid-template-columns: 1fr 1fr; align-items: start; }
  .home-group-wide { grid-column: 1 / -1; }
  .home-group-wide .nav-list { columns: 2; column-gap: var(--space-6); }
  .home-group-wide .nav-list li { break-inside: avoid; }
}
.subject-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.new-exam { display: grid; gap: var(--space-4); max-width: 34rem; margin-top: var(--space-4); }
.ne-field { display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-muted); font-size: var(--size-sm); }
.ne-field input, .ne-field select { padding: var(--space-2); font-size: var(--size-base); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.ne-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.ne-error { border-color: var(--danger); color: var(--danger); }
/* Exàmens en una graella de botons: l'any i, a sota, la convocatòria i la sèrie. */
.exam-grid { list-style: none; padding-left: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--space-2); }
.exam-btn { flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: var(--space-2) var(--space-3); line-height: var(--leading-tight); }
.exam-btn:hover { border-color: var(--accent); }
.exam-btn-year { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
.exam-btn-sub { font-size: var(--size-xs); color: var(--text-muted); }
/* Pàgina d'assignatura: temes i exàmens a la mateixa pàgina, amb salts interns */
.subject-part { scroll-margin-top: var(--space-4); margin-top: var(--space-7); }
.subject-part h3 { font-size: var(--size-lg); margin-block: var(--space-5) var(--space-1); }

/* Filtres del llistat per tema */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; margin-block: var(--space-3) var(--space-4); }
/* Plegats per defecte: en entrar a un tema, el primer exercici ha de quedar a la vista. */
.filters-box > summary { cursor: pointer; display: inline-flex; align-items: center; color: var(--text-muted); font-size: var(--size-sm); }
.filters-box > summary:hover { color: var(--accent); }
.filters-box > summary::before { content: '▸'; margin-right: var(--space-2); }
.filters-box[open] > summary::before { content: '▾'; }
.filters-box > summary::-webkit-details-marker { display: none; }
.filters label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--size-sm); color: var(--text-muted); }
.filters select, .filters input, .filters button { font-size: var(--size-base); padding: var(--space-2); border-radius: var(--radius-sm); border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text); }

/* Enunciats (SVG de tinta negra) sobre paper blanc en tots dos temes. */
.statement, .solution-body {
  background: var(--paper);
  color: var(--paper-ink);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.statement:empty { display: none; }
.statement img, .solution-body img { display: block; height: auto; margin-block: var(--space-1); }

article { margin-block: var(--space-6); scroll-margin-top: var(--space-4); }
/* Salts als problemes d'un examen, i problema anterior/següent dins d'un exercici */
/* Graella de botons, tots a la vista i sense cap desplaçament intern. */
.jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tap-target), 1fr)); gap: var(--space-2); margin-block: var(--space-4); }
.jump .btn { padding-inline: 0; }
.ex-nav { display: flex; gap: var(--space-3); margin-block: var(--space-5) var(--space-4); }
.ex-nav-next { margin-left: auto; }
/* Títol de cada exercici dins d'un tema: enllaç permanent + dificultat */
.feed-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--size-lg); }
.feed-title a { color: var(--text); text-decoration: none; }
.feed-title a:hover { color: var(--accent); text-decoration: underline; }
.fragment.placeholder {
  background: var(--surface-alt);
  border: var(--border-width) dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
}
details.solution {
  margin-top: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
details.solution summary { cursor: pointer; font-weight: var(--weight-bold); min-height: var(--tap-target); display: flex; align-items: center; }

/* Exercicis marcats com a fets (estat només al navegador, fet.js) */
.fet-row { margin-block: var(--space-3) 0; }
/* Peu de cada exercici d'una llista: «fet» a l'esquerra i, si n'hi ha, l'avís de tema incorrecte a la dreta. */
.ex-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-4); }
.ex-foot .reclass { margin: var(--space-3) 0 0; }
.fet-btn .fet-on, .fet-btn[aria-pressed="true"] .fet-off { display: none; }
.fet-btn[aria-pressed="true"] .fet-on { display: inline; }
.fet-btn[aria-pressed="true"] { background: var(--encert-tint); color: var(--encert-text); border-color: var(--encert-tint); }
/* Al títol d'un tema el vist va dins de l'enllaç: l'h2 és un flex i un ::before
   propi hi faria de tercera columna. */
article.is-fet > h2:not(.feed-title)::before, article.is-fet > .feed-title a::before { content: '✓ '; color: var(--success); }
.fet-count::before { content: ' · '; }
.fet-count { color: var(--encert-text); }

/* Suggeriment de reclassificació (alumnes) — funció temporal, discreta */
.reclass { margin: var(--space-3) 0 var(--space-5); font-size: var(--size-sm); }
.reclass a { color: var(--text-muted); min-height: var(--tap-target); display: inline-flex; align-items: center; }
.reclass a:hover { color: var(--accent); }
.reclass-form { margin-top: var(--space-2); padding: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.reclass-hint { margin-top: 0; color: var(--text-muted); }
.reclass-topics { max-height: 46vh; overflow-y: auto; display: grid; gap: var(--space-3); }
.reclass-block { border: 0; margin: 0; padding: 0; min-width: 0; }
.reclass-block legend { font-family: var(--font-display); font-weight: var(--weight-bold); padding: 0; margin-bottom: var(--space-1); }
.reclass-opt { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); cursor: pointer; }
.reclass-opt input { flex: none; }
.reclass-send { margin-top: var(--space-4); width: 100%; }
.reclass-done { color: var(--success); font-size: var(--size-sm); margin: var(--space-3) 0 var(--space-5); }

/* Avisos */
.notice {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--text-muted);
}

/* Paginació */
.pagination { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-5); }

@media (min-width: 40rem) {
  h1 { font-size: var(--size-3xl); }
}