/* Guia dels calendaris — esquelet compartit per totes les peces.
   Aquí hi ha només el que surt a més d'una peça: els tokens, la tipografia,
   la capçalera, els botons, les targetes de xifres i la navegació. Tot el que
   és d'una peça sola viu al seu estil.css, que es carrega després d'aquest. */

:root{
  /* fons i tinta */
  --nit:#120E22;          /* fons de pàgina; igual que el meta theme-color */
  --panell:#1A1535;       /* targetes i panells */
  --fosc:#0D0A1B;         /* forats: camps d'entrada, pistes de regle */
  --capsalera:#150F2E;    /* franges de capçalera dins d'una targeta */
  --vora:#2E2652;
  --vora-viva:#4A3F80;    /* vora quan hi passes per sobre */
  --tinta:#EDE9F7;
  --suau:#D3CDEA;         /* text de suport, una mica apagat */
  --apagat:#9A93B8;       /* etiquetes i notes */

  /* els colors signifiquen coses; no es fan servir per decorar */
  --sol:#F0B429;          /* tot el que és solar / any */
  --lluna:#8FB8DE;        /* tot el que és lunar / mes */
  --falta:#E4572E;        /* error, desviació, el que no encaixa */
  --verd:#5FBF8F;         /* encert, confirmació */

  /* botons */
  --boto:#221B44;
  --boto-viu:#2C2456;

  /* Display en serif i cos en sans: l'invers del típic, i dona el to escolar
     que busquem. Les xifres sempre en mono — encodifica «això és una mesura». */
  --serif:"Iowan Old Style","Charter",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ample:720px;          /* amplada de la columna; alguna peça l'eixampla */
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--nit); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:0 20px calc(72px + env(safe-area-inset-bottom));
}
.full{max-width:var(--ample); margin:0 auto}

/* ---------- capçalera ---------- */
header{padding:40px 0 8px}
.molla{
  font-family:var(--mono); font-size:13px; color:var(--apagat);
  margin:0 0 26px;
}
.molla a{color:var(--apagat); text-decoration:none; border-bottom:1px solid transparent}
.molla a:hover{color:var(--tinta); border-bottom-color:var(--vora-viva)}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--apagat); margin:0 0 18px;
}
h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(34px,7.5vw,54px);
  line-height:1.05; letter-spacing:-.02em; margin:0 0 20px;
}
h1 em{font-style:normal; color:var(--falta)}
.lead{font-size:19px; color:var(--suau); margin:0; max-width:56ch}

/* ---------- text ---------- */
h2{
  font-family:var(--serif); font-weight:600; font-size:26px;
  letter-spacing:-.01em; margin:56px 0 12px;
}
p{max-width:60ch}
.nota{color:var(--apagat); font-size:15px}
em{font-style:italic; color:#CFC9E6}
a{color:var(--lluna)}

/* ---------- botons ---------- */
button{
  font:inherit; font-size:15px; color:var(--tinta);
  background:var(--boto); border:1px solid var(--vora);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:background .15s, border-color .15s, opacity .15s;
}
button:hover:not(:disabled){background:var(--boto-viu); border-color:var(--vora-viva)}
button:disabled{opacity:.3; cursor:not-allowed}
button.primari{background:var(--tinta); color:var(--nit); border-color:var(--tinta); font-weight:600}
button.primari:hover:not(:disabled){background:#fff}
button.ghost{background:transparent; color:var(--apagat); border-color:transparent}
button.ghost:hover:not(:disabled){background:var(--boto); color:var(--tinta)}

/* Botó d'engegar i aturar. Les dues etiquetes van a la mateixa casella de la
   graella i només se n'amaga una: així el botó fa sempre l'amplada de la més
   llarga. Si canviava de mida en prémer-lo, es recol·locava la fila sencera i
   fugia de sota el cursor abans del segon clic. */
button.motor{display:grid; justify-items:center}
button.motor span{grid-area:1 / 1}
button.motor[data-corrent="false"] .atura{visibility:hidden}
button.motor[data-corrent="true"] .arrenca{visibility:hidden}
:focus-visible{outline:2px solid var(--lluna); outline-offset:3px}
input[type=range]{accent-color:var(--lluna)}

/* ---------- targetes de xifres ----------
   Una graella de mesures. Cada peça hi posa la seva amplada mínima amb
   --min, i així no calen punts de ruptura: les columnes cauen soles. */
.xifres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(var(--min,150px),1fr));
  gap:1px; background:var(--vora); border:1px solid var(--vora);
  border-radius:12px; overflow:hidden;
}
.xifres>div{background:var(--panell); padding:14px 12px; min-width:0}
.xifres .xifra{font-family:var(--mono); font-size:20px; font-variant-numeric:tabular-nums}
.xifres .et{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--apagat); margin-top:4px;
}

/* ---------- graella de blocs de text ---------- */
.cossos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  background:var(--vora); border:1px solid var(--vora); border-radius:12px;
  overflow:hidden; margin-top:24px;
}
.cossos>div{background:var(--panell); padding:15px 16px}
.cossos .t{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sol); margin-bottom:5px;
}
.cossos .d{font-size:15px; color:#CFC9E6; line-height:1.5}

/* ---------- gràfics ---------- */
.grafic{background:var(--panell); border:1px solid var(--vora); border-radius:14px; padding:16px}
.grafic canvas{width:100%; display:block}
.clau{display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--apagat); margin-top:10px}
.clau i{display:inline-block; width:16px; height:2px; vertical-align:middle; margin-right:6px}

/* ---------- pont cap a la peça següent ---------- */
.pont{margin-top:60px; padding:26px 22px; background:var(--panell); border:1px solid var(--vora); border-radius:14px}
.pont p{margin:0 0 10px}
.pont p:last-child{margin:0}

/* ---------- navegació i peu ---------- */
nav.peces{display:flex; gap:8px; flex-wrap:wrap; margin:40px 0 0; padding-top:26px; border-top:1px solid var(--vora)}
nav.peces a{
  font-family:var(--mono); font-size:13px; text-decoration:none; color:var(--apagat);
  border:1px solid var(--vora); border-radius:999px; padding:7px 14px; transition:.15s;
}
nav.peces a:hover{color:var(--tinta); border-color:var(--vora-viva)}
nav.peces a[aria-current="page"]{color:var(--nit); background:var(--tinta); border-color:var(--tinta)}
footer{margin:56px 0 0; padding-top:22px; border-top:1px solid var(--vora); color:var(--apagat); font-size:14px}