/* ================= Interactive 12-point checklist =========================
   Progress uses the same rank ramp as the geo-grid, so filling the bar reads
   as "your map going green". Explanations open on tick, so every interaction
   returns information rather than withholding it.
   ========================================================================== */
.ckl{ max-width:52rem; }
.ckl__meter{
  position:sticky; top:64px; z-index:20;
  background:var(--basemap); border:1px solid var(--rule-invert);
  border-radius:2px; padding:var(--s4); margin-bottom:var(--s5);
}
.ckl__bar{ display:flex; gap:4px; margin-bottom:var(--s3); }
.ckl__bar i{
  flex:1; height:12px; border-radius:2px; display:block;
  background:rgba(244,245,240,.10); border:1px solid var(--rule-invert);
  transition:background .28s ease, border-color .28s ease;
}
.ckl__bar i[data-on="1"]{ background:var(--rank-5); border-color:var(--rank-5); }
.ckl__bar i[data-on="2"]{ background:var(--rank-4); border-color:var(--rank-4); }
.ckl__bar i[data-on="3"]{ background:var(--rank-3); border-color:var(--rank-3); }
.ckl__bar i[data-on="4"]{ background:var(--rank-2); border-color:var(--rank-2); }
.ckl__bar i[data-on="5"]{ background:var(--rank-1); border-color:var(--rank-1); }
.ckl__readout{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.ckl__score{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-invert); margin:0; flex:none;
}
.ckl__score span{ font-size:1.5rem; font-weight:600; color:var(--beacon-hi); letter-spacing:-.02em; }
.ckl__verdict{ margin:0; font-size:var(--step--1); color:var(--ink-invert-soft); line-height:1.45; }

.ckl__list{ list-style:none; padding:0; margin:0; max-width:none; }
.ckl__item{
  border-bottom:1px solid var(--rule); margin:0;
  scroll-margin-top:170px;   /* clears the sticky header + progress meter */
}
.ckl__label{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s4) 0; cursor:pointer; font-weight:400;
}
/* Visually hidden but focusable, and NOT overlaying the row — an absolutely
   positioned transparent input was intercepting pointer events. */
.ckl__label input{
  position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none;
}
.ckl__box{
  width:1.35rem; height:1.35rem; flex:none; margin-top:.15rem; border-radius:2px;
  border:1.5px solid var(--rule-hard); background:#fff;
  display:grid; place-items:center; transition:background .16s, border-color .16s;
}
.ckl__box::after{
  content:""; width:.42rem; height:.75rem; border:solid #fff;
  border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .16s ease; margin-top:-.15rem;
}
.ckl__label input:checked ~ .ckl__box{ background:var(--beacon); border-color:var(--beacon); }
.ckl__label input:checked ~ .ckl__box::after{ transform:rotate(45deg) scale(1); }
.ckl__label input:focus-visible ~ .ckl__box{ outline:var(--focus); outline-offset:2px; }
.ckl__text{ display:block; }
.ckl__text strong{ font-family:var(--display); font-weight:700; font-size:var(--step-0); letter-spacing:-.012em; }
.ckl__sub{ display:block; color:var(--ink-soft); font-size:var(--step--1); margin-top:.15rem; }
.ckl__label input:checked ~ .ckl__text strong{ color:var(--beacon-lo); }

.ckl__more{
  background:none; border:0; padding:0 0 var(--s4) 2.35rem; margin:0; cursor:pointer;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--beacon-lo); text-decoration:underline; text-underline-offset:.25em;
}
.ckl__more:hover{ color:var(--ink); }
.js .ckl__label{ padding-bottom:var(--s2); }

.ckl__why{
  padding:0 0 0 2.35rem; margin:0 0 var(--s4);
  border-left:2px solid var(--beacon); margin-left:.65rem;
}
.ckl__why p{ margin:0 0 .5rem; font-size:var(--step--1); color:var(--ink-soft); max-width:60ch; }
.ckl__why p:last-child{ margin-bottom:0; }
.ckl__tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--beacon-lo) !important; margin-bottom:.35rem !important;
}
/* Collapsed only when scripting is available to reopen it */
.js .ckl__why{
  display:grid; grid-template-rows:0fr; opacity:0; margin-bottom:0;
  transition:grid-template-rows .3s ease, opacity .3s ease, margin-bottom .3s ease;
}
.js .ckl__why > div{ overflow:hidden; }
.js .ckl__item[data-open="1"] .ckl__why{ grid-template-rows:1fr; opacity:1; margin-bottom:var(--s4); }

.ckl__out{ margin-top:var(--s5); }
.ckl__out h3{ margin-top:0; }
.ckl__moves{ counter-reset:mv; list-style:none; padding:0; }
.ckl__moves li{
  counter-increment:mv; position:relative; padding-left:2.4rem; margin-bottom:var(--s3);
}
.ckl__moves li::before{
  content:counter(mv); position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.72rem; font-weight:600; color:var(--beacon-lo);
  width:1.6rem; height:1.6rem; border:1px solid var(--beacon); border-radius:2px;
  display:grid; place-items:center;
}
@media (max-width:640px){
  .ckl__meter{ position:static; }
  .ckl__item{ scroll-margin-top:80px; }
  .ckl__why{ margin-left:0; padding-left:var(--s3); }
  .ckl__more{ padding-left:0; }
}
/* No JS: every explanation is already open, no toggle shown */
html:not(.js) .ckl__more{ display:none; }