/* Peça 4 — Quin seria el calendari perfecte? */

h2{font-size:26px; margin:56px 0 12px}
h3{font-family:var(--serif); font-weight:600; font-size:21px; margin:38px 0 10px}

/* ---------- els tres desitjos ----------
   Un grup de ràdio disfressat d'interruptors: en pots apagar un, i només un.
   El desig al qual renuncies queda ratllat, que és el gest que es vol dir. */
.desitjos{
  display:grid; gap:1px; margin:26px 0 24px;
  background:var(--vora); border:1px solid var(--vora); border-radius:14px; overflow:hidden;
}
.desitjos button{
  display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  background:var(--panell); border:0; border-radius:0; padding:15px 17px;
  font-size:16px; line-height:1.45;
}
.desitjos button:hover{background:var(--boto-viu)}
.desitjos .pal{
  flex:none; width:40px; height:23px; margin-top:1px; border-radius:999px;
  background:var(--fosc); border:1px solid var(--vora-viva); position:relative;
  transition:background .18s, border-color .18s;
}
.desitjos .pal::after{
  content:''; position:absolute; top:3px; left:3px; width:15px; height:15px;
  border-radius:50%; background:var(--apagat); transition:transform .18s, background .18s;
}
.desitjos button[aria-checked="true"] .pal{background:#20503C; border-color:var(--verd)}
.desitjos button[aria-checked="true"] .pal::after{transform:translateX(17px); background:var(--verd)}
.desitjos button[aria-checked="false"] .txt{color:var(--apagat)}
.desitjos button[aria-checked="false"] .txt b{text-decoration:line-through}
.desitjos .txt b{display:block; font-weight:600; color:var(--tinta)}
.desitjos button[aria-checked="false"] .txt b{color:var(--apagat)}

/* ---------- el dictamen ---------- */
.dictamen{
  background:var(--panell); border:1px solid var(--vora); border-radius:14px;
  padding:22px 22px 24px; margin-bottom:34px;
}
.dictamen[data-estat="impossible"]{border-color:#5E2F22; background:#1C1230}
.dictamen h3{margin:2px 0 4px; font-size:25px}
.dictamen p{margin:0 0 12px; max-width:58ch}
.dictamen p:last-child{margin-bottom:0}
.dictamen .etiqueta{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sol); margin-bottom:6px;
}
.dictamen[data-estat="impossible"] .etiqueta{color:var(--falta)}
.dictamen .qui{font-family:var(--serif); font-size:19px; color:var(--suau); margin-bottom:14px}
.dictamen .compte{
  font-family:var(--mono); font-size:clamp(15px,4.2vw,21px); color:var(--suau);
  background:var(--fosc); border:1px solid var(--vora); border-radius:10px;
  padding:14px 16px; text-align:center;
}
.dictamen .compte b{color:var(--falta); font-size:1.25em}
.dictamen .preu{
  border-top:1px solid var(--vora); padding-top:13px; margin-top:16px;
  font-size:15px; color:var(--suau);
}
.dictamen .preu b{color:var(--tinta)}

/* ---------- la llista dels calendaris que fem anar alhora ---------- */
ul.alhora{max-width:60ch; margin:14px 0 0; padding-left:22px}
ul.alhora li{margin-bottom:9px}
ul.alhora li::marker{color:var(--sol)}
ul.alhora b{color:var(--tinta)}
#jd{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- l'escala de regles ---------- */
.escala{
  display:grid; gap:1px; margin:24px 0 18px;
  background:var(--vora); border:1px solid var(--vora); border-radius:12px; overflow:hidden;
}
.escala button{
  display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:center;
  width:100%; text-align:left; background:var(--panell); border:0; border-radius:0;
  padding:11px 16px;
}
.escala button:hover{background:var(--boto-viu)}
.escala .nom{grid-column:1; grid-row:1; font-weight:600; font-size:16px}
.escala .qui{grid-column:1; grid-row:2; font-size:13px; color:var(--apagat)}
.escala .mitj{
  grid-column:2; grid-row:1 / 3; text-align:right;
  font-family:var(--mono); font-size:15px; color:var(--suau); font-variant-numeric:tabular-nums;
}
.escala button[aria-checked="true"]{background:var(--boto-viu); box-shadow:inset 3px 0 0 var(--sol)}
.escala button[aria-checked="true"] .mitj{color:var(--sol)}

/* ---------- taulell de comandaments ---------- */
.taulell{background:var(--panell); border:1px solid var(--vora); border-radius:14px; padding:18px 20px; margin:22px 0}
.camp label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--apagat); margin-bottom:9px;
}
.linia{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.linia .nota{margin:0}
input[type=number]{
  font-family:var(--mono); font-size:17px; width:100px; color:var(--tinta);
  background:var(--fosc); border:1px solid var(--vora); border-radius:8px; padding:8px 10px;
}
input[type=range]{accent-color:var(--sol); flex:1; min-width:160px}
.valorSlider{font-family:var(--mono); font-size:15px; min-width:96px; text-align:right}

/* ---------- resultats ---------- */
.xifres{--min:200px; margin:20px 0}
#error{color:var(--falta)}
#error.be{color:var(--verd)}   /* per sota de mig mil·lèsim de dia ja no és un error */

/* ---------- franja d'estacions ---------- */
.capFranja{
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--apagat);
}
.franja{position:relative; margin:28px 0 8px; height:76px}
.banda{
  position:absolute; left:0; right:0; top:22px; height:30px;
  border-radius:6px; overflow:hidden; display:flex; border:1px solid var(--vora);
}
.banda span{height:100%; display:block}
.marcador{position:absolute; top:6px; bottom:16px; width:2px; background:var(--tinta); transition:left .4s cubic-bezier(.2,.7,.3,1)}
.marcador::before{
  content:''; position:absolute; top:-1px; left:-4px; width:10px; height:10px;
  background:var(--tinta); border-radius:50%;
}
.etiquetes{position:absolute; left:0; right:0; bottom:0; height:16px; font-family:var(--mono); font-size:11px; color:var(--apagat)}
.etiquetes b{position:absolute; font-weight:400; transform:translateX(-50%)}
.veredicte{font-family:var(--serif); font-size:20px; line-height:1.45; margin:14px 0 0; max-width:58ch}
.veredicte b{font-weight:600; color:var(--sol)}

/* ---------- el comptador de dies ---------- */
input[type=date]{
  font-family:var(--mono); font-size:16px; color:var(--tinta);
  background:var(--fosc); border:1px solid var(--vora); border-radius:8px; padding:8px 10px;
}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.75); cursor:pointer}
.xifres.comp{--min:210px}
.xifres.comp #compDies{color:var(--sol); font-size:24px}
#compMaia{font-size:17px}

/* ---------- la roda de l'any ---------- */
.grafic.roda{padding:10px}
.controls{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px}
.fitxaTerme{
  background:var(--panell); border:1px solid var(--vora); border-radius:14px;
  padding:18px 20px; margin-top:14px; text-align:center;
}
.fitxaTerme .etiqueta{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--apagat); margin:0;
}
.fitxaTerme .han{
  font-size:44px; line-height:1.1; margin:8px 0 2px; color:var(--sol);
  /* els ideogrames els posa la font del sistema; si no n'hi ha cap, el
     pinyin de sota diu el mateix i la fitxa no perd res */
}
.fitxaTerme h4{
  font-family:var(--serif); font-weight:600; font-size:22px; margin:0 0 8px;
}
.fitxaTerme h4 span{color:var(--suau); font-weight:400}
.fitxaTerme .quan{font-family:var(--mono); font-size:13px; color:var(--suau); margin:0 auto; max-width:none}
.fitxaTerme .pentades{font-size:14px; color:var(--apagat); margin:8px auto 0; max-width:none}
.fitxaTerme b{color:var(--tinta); font-weight:600}
#xifresRoda{--min:170px; margin-top:14px}
#xifresRoda .xifra{color:var(--lluna)}

/* ---------- llenços ---------- */
#taula{height:340px}
#grafic{height:260px}
#roda{height:400px}
.clau i.tick{width:3px; height:14px; border-radius:1px}
.clau i.disc{width:11px; height:11px; border-radius:50%; border:1px solid rgba(154,147,184,.55)}
.clau i.tick{background:var(--sol)}
.clau i.disc.nova{background:#282249}
.clau i.disc.plena{background:var(--lluna)}

@media (max-width:520px){
  .desitjos button{font-size:15px; padding:13px 14px; gap:11px}
  .escala .mitj{font-size:13px}
  #taula{height:290px}
  #roda{height:330px}
  .fitxaTerme .han{font-size:36px}
  .controls button{flex:1; min-width:0; padding:9px 10px; font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .marcador, .desitjos .pal, .desitjos .pal::after{transition:none}
}