:root{
  --bg:#f8fafc; --surface:#ffffff; --border:#cbd5e1;
  --txt:#1e293b; --muted:#475569; --accent:#2563eb; --hd-bg:#1e293b;
  --ana:#7c5cbf; --ana-tint:rgba(124,92,191,.07);
  --err:#b42318; --err-tint:#fef3f2; --err-border:#f1b4ad; --ok:#166534;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Libre Baskerville',Georgia,serif;background:var(--bg);color:var(--txt);min-height:100vh;padding-bottom:68px;}
header{background:var(--hd-bg);color:#fff;padding:9px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
header h1{font-size:.98rem;font-weight:700;line-height:1.25;}
.site-link{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;opacity:.85;}
.site-link:hover{opacity:1;}
.site-icon{width:47px;height:47px;object-fit:contain;border-radius:8px;}
.site-label{font-family:'Source Code Pro',monospace;font-size:.65rem;color:rgba(255,255,255,.7);line-height:1.4;text-align:right;white-space:nowrap;}

.view{display:none;padding:22px 18px 28px;max-width:820px;margin:0 auto;}
.view.active{display:block;}

.back-btn{display:inline-flex;align-items:center;gap:5px;font-family:'Source Code Pro',monospace;font-size:.73rem;
  color:var(--accent);cursor:pointer;margin-bottom:20px;padding:6px 11px;min-height:44px;border:1px solid var(--accent);
  border-radius:5px;background:none;transition:background .15s,color .15s;text-decoration:none;}
.back-btn:hover{background:var(--accent);color:#fff;}

.cat-title{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:var(--ana);}
.cat-sub{font-size:.78rem;color:var(--muted);margin-bottom:20px;}

.ex-list{list-style:none;display:flex;flex-direction:column;gap:5px;}
.ex-item{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:13px 16px;border:1px solid var(--border);border-radius:6px;
  cursor:pointer;background:var(--surface);position:relative;box-shadow:inset 4px 0 0 transparent;
  transition:box-shadow .18s,background .18s,border-color .18s,transform .18s;text-decoration:none;color:inherit;}
.ex-row{display:flex;align-items:center;gap:14px;cursor:pointer;flex:1 1 100%;}
.ex-item:hover{box-shadow:inset 4px 0 0 var(--ana);background:var(--ana-tint);
  border-color:color-mix(in srgb,var(--ana) 30%,var(--border));transform:translateX(3px);}
.ex-badge{font-family:'Source Code Pro',monospace;font-size:.84rem;padding:4px 10px;border-radius:3px;color:#fff;
  white-space:nowrap;flex-shrink:0;background:var(--ana);}
.ex-info{flex:1;min-width:0;}
.ex-title{font-size:.87rem;line-height:1.4;}
.ex-sub{font-family:'Source Code Pro',monospace;font-size:.66rem;color:var(--muted);margin-top:3px;}
.ex-arrow{font-size:.85rem;color:var(--muted);flex-shrink:0;opacity:0;transform:translateX(-4px);
  transition:opacity .18s,transform .18s;}
.ex-item:hover .ex-arrow{opacity:1;transform:translateX(0);}
.ex-fet-tag{font-family:'Source Code Pro',monospace;font-size:.58rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:#22c55e;border-radius:3px;padding:2px 7px;flex-shrink:0;}
.ex-item.is-fet{background:color-mix(in srgb,#22c55e 8%,var(--surface));
  border-color:color-mix(in srgb,#22c55e 35%,var(--border));}

.det-header{margin-bottom:16px;}
.det-header h2{font-size:.98rem;font-weight:700;line-height:1.4;}
.det-meta{font-family:'Source Code Pro',monospace;font-size:.68rem;color:var(--muted);margin-top:3px;}

.done-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Libre Baskerville',serif;font-size:.84rem;
  padding:9px 18px;border-radius:6px;cursor:pointer;border:3px solid transparent;
  transition:background .18s,color .18s,border-color .18s;margin-bottom:18px;}
.done-btn.not-done{background:#94a3b8;color:#fff;}
.done-btn.is-done{background:#22c55e;color:#fff;font-weight:700;}
.done-btn:hover{border-color:#000;}

.pista-wrap{flex:1 1 100%;margin-top:11px;padding-top:11px;border-top:1px dashed var(--border);}
.ex-botons{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.pista-btn,.sol-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Libre Baskerville',serif;font-size:.78rem;
  padding:6px 14px;min-height:44px;border-radius:6px;cursor:pointer;border:1px solid var(--ana);background:none;color:var(--ana);
  transition:background .15s,color .15s;}
.pista-btn:hover{background:var(--ana);color:#fff;}
.sol-btn{background:var(--ana);color:#fff;}
.sol-btn:hover{background:color-mix(in srgb,var(--ana) 80%,#000);}
.pista-text{margin-top:9px;padding:11px 14px;border-radius:6px;background:var(--ana-tint);
  border:1px solid color-mix(in srgb,var(--ana) 30%,var(--border));font-size:.82rem;line-height:1.55;}

.page-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.page-fig{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#f0ede6;}
.page-fig img{display:block;width:100%;cursor:zoom-in;}
.page-actions{display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.page-fname{font-family:'Source Code Pro',monospace;font-size:.68rem;color:var(--muted);}
.page-link{font-family:'Source Code Pro',monospace;font-size:.72rem;color:var(--accent);text-decoration:none;
  padding:5px 10px;border:1px solid var(--accent);border-radius:3px;transition:background .15s,color .15s;}
.page-link:hover{background:var(--accent);color:#fff;}

/* Errades del solucionari (errades.js)
   El vermell només es fa servir aquí: a la web, vermell vol dir «errada del solucionari». */
.err-ico{width:1.05em;height:1.05em;flex-shrink:0;}

/* L'avís de la llista de la tasca */
/* Va al costat del botó «Veure solució». És una etiqueta, no un botó: més petita i sense el contorn d'un botó. */
.ex-err{display:inline-flex;align-items:center;gap:6px;font-family:'Libre Baskerville',Georgia,serif;font-size:.74rem;font-weight:700;
  line-height:1.35;color:var(--err);background:var(--err-tint);border:1px solid var(--err-border);border-radius:3px;padding:4px 9px;
  cursor:default;}

/* El bloc d'errades: un títol i una targeta per errada */
.err-panel{border:1px solid var(--err-border);background:var(--err-tint);border-radius:6px;padding:12px 14px 14px;
  margin-bottom:14px;cursor:default;}
.err-cap{display:flex;align-items:flex-start;gap:8px;font-size:.86rem;font-weight:700;line-height:1.4;color:var(--err);}
.err-cap .err-ico{margin-top:.17em;}
.err-card{background:var(--surface);border:1px solid var(--err-border);border-radius:6px;padding:5px 14px;margin-top:10px;}
.err-lloc{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;font-size:.82rem;font-weight:700;line-height:1.4;padding-top:6px;}
.err-lloc-text{flex:1 1 auto;min-width:0;}
/* El número lliga la targeta amb el seu requadre a la imatge. */
.err-num,.marca-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--err);color:#fff;font-family:'Source Code Pro',monospace;font-size:.72rem;font-weight:700;line-height:1;flex-shrink:0;}
.err-veure{font-family:'Source Code Pro',monospace;font-size:.7rem;color:var(--err);background:none;border:1px solid var(--err-border);
  border-radius:3px;padding:6px 11px;min-height:36px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.err-veure:hover{background:var(--err);border-color:var(--err);color:#fff;}
.ex-item:focus-visible,.err-veure:focus-visible,.marca:focus-visible,.lb-tanca:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
/* «On diu» i «Ha de dir», un sota l'altre i amb el text alineat, perquè la diferència es vegi d'un cop d'ull. */
.err-fila{display:grid;grid-template-columns:5.4em minmax(0,1fr);column-gap:12px;align-items:baseline;padding:1px 0;}
.err-fila + .err-fila{border-top:1px dashed var(--border);}
.err-et{font-size:.8rem;font-weight:700;}
.err-et-on{color:var(--err);}
.err-et-ha{color:var(--ok);}
.err-et-mo{color:var(--muted);}
/* El farciment vertical dona aire a les fraccions i matrius, que sobresurten una mica de la línia. */
.err-val{font-size:.86rem;line-height:1.75;overflow-x:auto;overflow-y:hidden;padding:7px 0;}
.err-tex{font-family:'Source Code Pro',monospace;font-size:.76rem;}
/* Puntuació enganxada a una fórmula (va dins de KaTeX): recupera la lletra i la mida del text. */
.err-punt{font-family:'Libre Baskerville',Georgia,serif;font-size:.8264em;}

/* Requadres sobre la imatge, al lloc de cada errada. Van en percentatges: valen a qualsevol mida. */
.page-fig{position:relative;}
.marca{position:absolute;box-sizing:border-box;margin:0;padding:0;border:2px solid var(--err);border-radius:3px;
  background:rgba(180,35,24,.1);cursor:zoom-in;-webkit-tap-highlight-color:transparent;transition:background .15s,box-shadow .15s;}
.marca:hover,.marca.activa{background:rgba(180,35,24,.2);box-shadow:0 0 0 3px rgba(180,35,24,.22);}
.marca-num{position:absolute;left:-12px;top:-12px;box-shadow:0 0 0 2px #fff;}

/* A la llista de la tasca (errades d'enunciat): un sol nivell, sense targeta dins de la targeta */
.err-llista{margin-bottom:12px;padding-bottom:6px;}
.err-llista .err-card{background:none;border:0;padding:0;margin-top:4px;}
.err-llista .err-card + .err-card{border-top:1px solid var(--err-border);padding-top:6px;margin-top:6px;}

/* Observacions: el mateix bloc, en gris */
.err-obs{border-color:var(--border);background:var(--bg);}
.err-obs .err-cap{color:var(--muted);}
.err-obs .err-card{border-color:var(--border);}

@media (max-width:520px){
  .err-panel{padding:10px 10px 12px;}
  .err-card{padding:4px 11px;}
  .err-fila{grid-template-columns:minmax(0,1fr);}
  .err-fila .err-et{padding-top:7px;}
  .err-fila .err-val{padding-top:4px;}
  /* Al mòbil, les fórmules una mica més petites: n'hi caben més de senceres en una línia. */
  .err-panel .katex{font-size:1.1em;}
  .err-punt{font-size:.9091em;}
}

/* Pegats: trossos de la pàgina ja corregits, posats a sobre de la imatge. No es noten ni es poden tocar
   (el clic passa a la imatge de sota). La mida i la posició venen en tant per cent, a cada pegat. */
.page-fig img.pegat,.lightbox img.pegat{position:absolute;display:block;max-width:none;max-height:none;border-radius:0;
  pointer-events:none;-webkit-user-select:none;user-select:none;}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;
  align-items:center;justify-content:center;padding:16px;cursor:zoom-out;}
.lightbox.active{display:flex;}
.lb-fig{position:relative;flex-shrink:0;line-height:0;}
.lightbox img{max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);border-radius:4px;cursor:zoom-in;}
/* El peu de la imatge ampliada: la correcció de l'errada que s'està mirant. */
.lb-peu{position:fixed;left:0;right:0;bottom:0;max-height:46vh;overflow:auto;background:var(--surface);border-top:3px solid var(--err);
  padding:6px 16px 10px;cursor:default;box-shadow:0 -6px 18px rgba(0,0,0,.28);}
.lb-peu[hidden]{display:none;}
.lb-peu-cos{max-width:784px;margin:0 auto;padding-right:46px;}
.lb-tanca{position:absolute;top:8px;right:10px;width:40px;height:40px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--txt);font-size:1.4rem;line-height:1;cursor:pointer;}
.lb-tanca:hover{background:var(--bg);}
/* Toca la imatge per ampliar-la a mida real amb desplaçament (scroll).
   align-items/justify-content passen a flex-start perquè, amb overflow:auto,
   una imatge centrada no es pot desplaçar bé fins a les vores. */
.lightbox.zoomed{align-items:flex-start;justify-content:flex-start;overflow:auto;padding:0;}
.lightbox.zoomed img{max-width:none;max-height:none;flex-shrink:0;border-radius:0;cursor:zoom-out;}

footer{position:fixed;bottom:0;left:0;width:100%;background:#f8f9fa;border-top:1px solid #ccc;padding:9px 16px;
  padding-bottom:max(9px,env(safe-area-inset-bottom));z-index:100;display:flex;align-items:center;
  justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;}
footer a{color:#333;text-decoration:underline;font-size:.83rem;}
footer span{font-size:.83rem;color:#333;font-family:'Source Code Pro',monospace;}
.cc-img{border:0;height:22px;vertical-align:middle;}

.buit{border:1px dashed var(--border);border-radius:6px;padding:26px 20px;text-align:center;
  color:var(--muted);font-size:.85rem;line-height:1.6;background:var(--surface);}

.vec{position:relative;display:inline-block;line-height:1;padding:.3em .12em 0;font-style:italic}
.vec::before,.vec::after{content:"";position:absolute;pointer-events:none}
.vec::before{left:.04em;right:.02em;top:.2em;height:.06em;background:currentColor}
.vec::after{right:.06em;top:.23em;width:.15em;height:.15em;box-sizing:border-box;border-top:.06em solid currentColor;border-right:.06em solid currentColor;transform:translateY(-50%) rotate(45deg)}

/* ── Elements clicables: en passar-hi el ratolí o amb el focus del teclat, vora negra
      gruixuda i fons gris clar. No canvia la mida ni es mou res: la vora és una ombra
      (box-shadow) a sobre de la vora que ja hi ha. Aquest bloc mana sobre els :hover d'adalt. */
.ex-item:hover,.ex-item:focus-visible,
.back-btn:hover,.back-btn:focus-visible,
.pista-btn:hover,.pista-btn:focus-visible,
.sol-btn:hover,.sol-btn:focus-visible,
.done-btn:hover,.done-btn:focus-visible,
.page-link:hover,.page-link:focus-visible,
.err-veure:hover,.err-veure:focus-visible,
.lb-tanca:hover,.lb-tanca:focus-visible,
.materia-btn:hover,.materia-btn:focus-visible{
  background:#e9e9e9;color:var(--txt);border-color:#000;box-shadow:0 0 0 1.5px #000;
  outline:none;transform:none;
}
.ex-arrow,.ex-item:hover .ex-arrow,.ex-item:focus-visible .ex-arrow{transform:none;}
.site-link:hover,.site-link:focus-visible{background:#e9e9e9;box-shadow:0 0 0 1.5px #000;border-radius:4px;outline:none;}
.site-link:hover .site-label,.site-link:focus-visible .site-label{color:#000;}
.marca:hover,.marca:focus-visible,.marca.activa{background:rgba(128,128,128,.22);border-color:#000;box-shadow:0 0 0 1.5px #000;outline:none;}