/* Peça 3 — Què va fer cadascú amb els onze dies */

:root{--ample:760px}

h1 em{font-style:italic; color:var(--sol)}
h2{font-size:30px; margin:0 0 6px}
h3{font-family:var(--serif); font-weight:600; font-size:21px; margin:30px 0 6px}
strong{font-weight:600; color:#fff}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.acte{margin-top:76px; padding-top:40px; border-top:1px solid var(--vora)}
.num{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--apagat); margin:0 0 10px}

button.petit{font-size:14px; padding:7px 15px}
.comanda{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 6px}
.comanda[hidden]{display:none}
input[type=range]{accent-color:var(--sol)}
.comanda input[type=range]{flex:1; min-width:150px}
.valor{font-family:var(--mono); font-size:15px; text-align:right; font-variant-numeric:tabular-nums}
.valor.anys{min-width:82px}
#octTxt{color:var(--apagat)}
#octTxt.fet{color:var(--sol)}

.quadre{background:var(--panell); border:1px solid var(--vora); border-radius:14px; padding:18px 16px; margin:26px 0 10px}
.quadre canvas{width:100%; display:block}
#carrils{height:360px}
#maia{height:300px}
#maiaRang{width:100%; margin-top:6px}

/* ---------- targetes opcionals ---------- */
.avis-opcional{
  display:flex; gap:14px; align-items:flex-start; margin:34px 0 0;
  border:1px dashed var(--vora); border-radius:12px; padding:14px 16px;
  color:var(--apagat); font-size:15px;
}
.avis-opcional p{margin:0; max-width:52ch}
details.desc{
  border-left:2px solid #3A2F63; border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,#181330 0%,rgba(24,19,48,0) 78%);
  margin:16px 0;
}
details.desc summary{
  list-style:none; cursor:pointer; padding:13px 16px 13px 15px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
details.desc summary::-webkit-details-marker{display:none}
details.desc summary:hover .ganxo{color:#fff}
.desc .tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--apagat); border:1px solid var(--vora); border-radius:999px; padding:3px 9px; flex:none;
}
.desc .ganxo{font-family:var(--serif); font-size:19px; line-height:1.25; color:var(--suau); transition:.15s}
.desc .creu{margin-left:auto; color:var(--apagat); font-family:var(--mono); font-size:19px; line-height:1; transition:transform .2s; flex:none}
details.desc[open] .creu{transform:rotate(45deg)}
details.desc[open]{background:linear-gradient(90deg,#1B1638 0%,rgba(27,22,56,0) 90%); border-left-color:var(--sol)}
.desc .cos{padding:0 18px 18px 15px}
.desc .cos p{font-size:16px; margin:0 0 12px}
.desc .cos p:last-child{margin-bottom:0}
.desc .cos .nota{font-size:14px}

/* ---------- reixa metònica ----------
   La reixa i el gràfic són una sola geometria: el canvas llegeix la posició
   real de cada casella, així cap punt de ruptura no els pot desalinear. */
.metonic{position:relative; margin:2px 0 6px}
.metonic canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.reixa{position:relative; z-index:1; display:grid; grid-template-columns:repeat(19,1fr); gap:3px; height:222px}
.reixa button{
  padding:5px 0 7px; border-radius:6px; background:transparent; border:1px solid transparent;
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10px; color:var(--apagat); line-height:1;
}
.reixa button:hover:not(:disabled){background:rgba(74,63,128,.20); border-color:var(--vora)}
.reixa button[aria-pressed="true"]{background:rgba(143,184,222,.10); border-color:rgba(143,184,222,.42); color:var(--lluna)}
.reixa .glif{font-size:11px; height:12px; color:var(--lluna)}
@media (max-width:560px){
  .reixa{gap:1px; height:196px}
  .reixa button{font-size:9px; padding:4px 0 5px}
}
.marcador{display:flex; gap:22px; flex-wrap:wrap; margin:14px 0 0; font-family:var(--mono); font-size:13px; color:var(--apagat)}
.marcador b{display:block; font-size:19px; color:var(--tinta); font-weight:400; margin-top:2px}
.veredicte{font-family:var(--serif); font-size:19px; line-height:1.4; margin:16px 0 0; min-height:56px; max-width:56ch}
.veredicte b{font-weight:600; color:var(--verd)}
.veredicte i{font-style:normal; color:var(--falta)}

/* ---------- graella d'octubre de 1582 ---------- */
.graella{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin:6px 0 0}
.graella .dia{
  aspect-ratio:1/1; border-radius:9px; background:var(--fosc); border:1px solid var(--vora);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:15px; color:var(--tinta); transition:.35s;
}
.graella .cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--apagat); text-align:center; padding-bottom:4px;
  background:none; border:none; aspect-ratio:auto;
}
.graella .dia.buit{background:transparent; border-color:transparent}
.graella .dia.mor{background:#2A1410; border-color:#5A2418; color:#7A4038; text-decoration:line-through}
.graella .dia.salt{border-color:var(--sol); color:var(--sol)}

/* ---------- els noms dels mesos ---------- */
.mesos{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px}
.mesos button{font-family:var(--mono); font-size:13px; padding:8px 13px; border-radius:9px; color:var(--apagat)}
.mesos button[aria-pressed="true"]{background:var(--tinta); color:var(--nit); border-color:var(--tinta)}
.mesos button.numeral{color:var(--sol); border-color:#4A3A18}
.mesos button.numeral[aria-pressed="true"]{background:var(--sol); color:var(--nit); border-color:var(--sol)}
.fitxa-mes{background:var(--fosc); border:1px solid var(--vora); border-radius:12px; padding:16px 18px; min-height:104px}
.fitxa-mes h4{font-family:var(--serif); font-size:20px; font-weight:600; margin:0 0 6px}
.fitxa-mes p{margin:0; font-size:16px; color:var(--suau); max-width:58ch}
.fitxa-mes .llati{font-family:var(--mono); font-size:12px; color:var(--apagat); letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px}
.remat{
  border-left:2px solid var(--sol); padding-left:18px; margin:26px 0 0;
  opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;
}
.remat.mostra{opacity:1; transform:none}
.remat[hidden]{display:none}

/* ---------- taula comparativa ---------- */
.taula{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.taula th{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--apagat);
  text-align:left; font-weight:400; padding:0 12px 8px 0; border-bottom:1px solid var(--vora);
}
.taula td{padding:9px 12px 9px 0; border-bottom:1px solid #241E45}
.taula td.n{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}