.examhero{padding-block:clamp(2.2rem,5vw,3.4rem) .5rem;text-align:center}
.examhero h1{font-size:clamp(2rem,5vw,3.1rem)}
.examhero .sub{margin-inline:auto}
.countdown{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.4rem;margin:1.8rem auto 0;max-width:460px}
.cdnum{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,10vw,4.6rem);line-height:1;
  color:var(--lime-fg);letter-spacing:-.03em}
.cdlab{font-weight:600;margin-top:.2rem}
.cdsub{color:var(--dim);font-size:.9rem;margin:.6rem 0 0}

.overall{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin-bottom:1.4rem;display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap}
.overall .olab{font-weight:650;font-size:.95rem}
.overall .otrack{flex:1;min-width:160px;height:10px;border-radius:999px;background:var(--bg2);
  overflow:hidden}
.overall .otrack i{display:block;height:100%;background:var(--lime);border-radius:999px;
  transition:width .35s ease}
.overall .opct{font-family:var(--disp);font-weight:700;color:var(--lime-fg)}

.subgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.subcard{text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.3rem;display:flex;flex-direction:column;gap:.35rem;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;width:100%}
.subcard:hover{transform:translateY(-3px);background:var(--card2)}
.subcard h3{font-size:1.15rem;margin:0}
.subcode{font-size:.7rem;letter-spacing:.12em;font-weight:700;color:var(--dim)}
.submeta{font-size:.85rem;color:var(--dim);margin:0}
.sbar{height:7px;border-radius:999px;background:var(--bg2);overflow:hidden;margin-top:.7rem}
.sbar i{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.subpct{font-size:.78rem;color:var(--dim)}
.subcard.c0{border-color:color-mix(in srgb,var(--cyan) 42%,var(--line))}
.subcard.c1{border-color:color-mix(in srgb,var(--pink) 42%,var(--line))}
.subcard.c2{border-color:color-mix(in srgb,var(--lime) 42%,var(--line))}
.subcard.c3{border-color:color-mix(in srgb,var(--yellow) 42%,var(--line))}
.subcard.c4{border-color:color-mix(in srgb,var(--violet) 42%,var(--line))}
.subcard.c5{border-color:color-mix(in srgb,var(--ok) 42%,var(--line))}
.subcard.c0 .sbar i{background:var(--cyan)} .subcard.c1 .sbar i{background:var(--pink)}
.subcard.c2 .sbar i{background:var(--lime)} .subcard.c3 .sbar i{background:var(--yellow)}
.subcard.c4 .sbar i{background:var(--violet)} .subcard.c5 .sbar i{background:var(--ok)}

/* timetable */
.examday{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;margin-bottom:.8rem}
.examday.past{opacity:.5}
.examday.isToday{border-color:var(--lime)}
.dayhead{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.55rem;flex-wrap:wrap}
.dayhead b{font-family:var(--disp);font-size:1.05rem}
.dayname{font-size:.8rem;color:var(--dim)}
.dayleft{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--yellow-fg);
  background:var(--bg2);border-radius:999px;padding:.15rem .6rem}
.examday.isToday .dayleft{background:var(--lime);color:#14210A}
.paper{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;
  border-top:1px solid var(--line)}
.paper:first-of-type{border-top:0}
.pdot{width:9px;height:9px;border-radius:50%;flex:none}
.paper.c0 .pdot{background:var(--cyan)} .paper.c1 .pdot{background:var(--pink)}
.paper.c2 .pdot{background:var(--lime)} .paper.c3 .pdot{background:var(--yellow)}
.paper.c4 .pdot{background:var(--violet)} .paper.c5 .pdot{background:var(--ok)}
.pmid{display:flex;flex-direction:column;min-width:0;flex:1}
.pmid b{font-size:.95rem;font-weight:650}
.pname{font-size:.82rem;color:var(--dim);overflow-wrap:anywhere}
.pright{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}
.pcode{font-size:.78rem;color:var(--dim);font-weight:650}
.ptime{font-size:.76rem;color:var(--dim)}
@media(max-width:600px){
  .paper{align-items:flex-start;flex-wrap:wrap}
  .pright{align-items:flex-start;text-align:left;width:100%;padding-left:1.4rem;
    flex-direction:row;gap:.6rem}
}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modalbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  width:min(620px,100%);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;
  overflow:hidden}
.modaltop{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;
  border-bottom:1px solid var(--line);flex:none}
.modaltop h3{font-size:1.1rem;margin-right:auto}
.modalx{background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  width:38px;height:38px;display:grid;place-items:center;color:var(--dim);font-size:1.05rem;flex:none}
.modalx:hover{color:var(--ink);border-color:var(--dim)}
.modalbody{padding:1.1rem 1.2rem 1.4rem;overflow:auto;flex:1;min-height:0}
.mpapers{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:1rem}
.mlabel{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  font-weight:700;width:100%}
.mchip{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:.3rem .65rem;font-size:.8rem;color:var(--dim)}
.mchip b{color:var(--ink);font-weight:650}
.mgroup{font-size:.95rem;margin:1.1rem 0 .5rem;color:var(--violet-fg);font-family:var(--ui);
  font-weight:700}
.mlist{display:grid;gap:.1rem}
.mtopic{display:flex;gap:.65rem;align-items:flex-start;padding:.4rem .4rem;border-radius:8px;
  cursor:pointer;font-size:.92rem;line-height:1.45}
.mtopic:hover{background:var(--bg2)}
.mtopic input{margin-top:.22rem;width:17px;height:17px;flex:none;accent-color:var(--lime)}
.mtopic input:checked + .mtext{color:var(--dim);text-decoration:line-through}
.mfoot{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.mprog{font-size:.86rem;color:var(--dim);font-weight:600}
.mfoot .btn{margin-left:auto}
.btn-sm{padding:.45rem 1rem;font-size:.85rem}
@media(max-width:560px){
  .modal{padding:0}
  .modalbox{border-radius:0;max-height:100dvh;height:100dvh;width:100%}
  .mfoot .btn{margin-left:0}
}
.srcnote{font-size:.85rem;color:var(--dim);margin-top:1.4rem}

/* live countdown */
.cdgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.9rem}
.cdcell{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:.7rem .2rem}
.cdv{display:block;font-family:var(--disp);font-weight:700;color:var(--lime-fg);
  font-size:clamp(1.5rem,6vw,2.3rem);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cdu{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-top:.3rem}
.cdwhen{color:var(--dim);font-size:.85rem;margin:.25rem 0 0}
.cdsub{font-weight:600;color:var(--ink);font-size:.95rem;margin:.1rem 0 0}

/* timetable rows are buttons that open the syllabus */
button.paper{width:100%;background:none;border:0;border-top:1px solid var(--line);
  text-align:left;cursor:pointer;border-radius:8px}
button.paper:first-of-type{border-top:0}
button.paper:hover{background:var(--bg2)}
button.paper:hover .pmid b{color:var(--cyan-fg)}
.psyl{flex:none;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:.15rem .5rem;
  margin-left:.6rem}
button.paper:hover .psyl{color:var(--cyan-fg);border-color:var(--cyan)}
@media(max-width:600px){
  .psyl{margin-left:1.4rem;margin-top:.3rem}
  button.paper{padding-block:.6rem}
}
.herolinks{margin:1.1rem 0 0}

/* preparation gaps between exam days, drawn as a bar so the lengths compare */
.gap{display:flex;align-items:center;gap:.7rem;margin:.5rem 0 .7rem;padding-inline:.3rem}
.gap.past{opacity:.4}
.gapbar{flex:0 0 clamp(70px,14vw,150px);height:9px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,currentColor 16%,transparent);color:var(--dim)}
.gapbar i{display:block;height:100%;border-radius:999px;background:currentColor}
.gaptxt{flex:none;font-size:.78rem;font-weight:650;white-space:nowrap;border-radius:999px;
  padding:.22rem .8rem;color:var(--dim);
  background:color-mix(in srgb,currentColor 15%,transparent);
  border:1px solid color-mix(in srgb,currentColor 34%,transparent)}
.g0{--tier:var(--gap0)} .g1{--tier:var(--gap1)} .g2{--tier:var(--gap2)}
.g3{--tier:var(--gap3)} .g4{--tier:var(--gap4)}
.gap .gaptxt,.gap .gapbar{color:var(--tier)}
@media(max-width:620px){
  .gap{flex-wrap:wrap;justify-content:center;padding-inline:0;gap:.45rem}
  .gapbar{flex:0 0 100%;order:2}
  .gaptxt{white-space:normal;text-align:center;line-height:1.35;
    flex:1 1 auto;min-width:0;max-width:100%;order:1}
}

/* the tint and border follow the text colour, so only the colour changes per tier */
.gap.g0 .gaptxt{color:var(--gap0)}
.gap.g1 .gaptxt{color:var(--gap1)}
.gap.g2 .gaptxt{color:var(--gap2)}
.gap.g3 .gaptxt{color:var(--gap3)}
.gap.g4 .gaptxt{color:var(--gap4)}
.gap.g0 .gapline{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gap0) 40%,transparent),transparent)}
.gap.g4 .gapline{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gap4) 40%,transparent),transparent)}
@media(max-width:620px){
  .gap{flex-wrap:wrap;justify-content:center;padding-inline:0}
  .gaptxt{white-space:normal;text-align:center;line-height:1.35;
    flex:1 1 auto;min-width:0;max-width:100%}   /* flex:none would block the wrap */
  .gapline{display:none}
}

/* legend for the gap bars */
.legend{display:flex;flex-wrap:wrap;gap:.45rem .9rem;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.7rem .95rem;margin:0 0 1.1rem}
.lglabel{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin-right:.15rem}
.lgitem{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--dim);
  white-space:nowrap}
.lgbar{width:46px;height:8px;border-radius:999px;flex:none;color:var(--tier);
  background:color-mix(in srgb,currentColor 18%,transparent)}
.lgbar i{display:block;height:100%;border-radius:999px;background:currentColor}
.lgbar.w0 i{width:6%} .lgbar.w1 i{width:20%} .lgbar.w2 i{width:50%}
.lgbar.w3 i{width:90%} .lgbar.w4 i{width:100%}
@media(max-width:520px){
  .legend{gap:.4rem .7rem;padding:.6rem .8rem}
  .lgitem{font-size:.74rem}
  .lgbar{width:34px}
}