/* checklist_builder block.
   No literal colour: every value is a token (hard rules 1 and 6).

   Two panels side by side: the ticks on the left, the answer on the right, so
   the consequence of a tick is visible without scrolling. On a phone they
   stack, ticks first, because the answer means nothing before anything is
   ticked. */

.cb__head { margin-bottom: 1.8rem; max-width: var(--measure); }
.cb__head .section-intro { margin-top: .6rem; }

.cb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); align-items: start; }

/* ------------------------------------------------------------- tick panel */
.cb__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem 1.6rem;
}
.cb__panel-title { font-size: 1.3rem; margin: 0 0 .4rem; }
.cb__panel-intro { font-size: var(--fs-min); color: var(--muted); margin: 0 0 1.1rem; line-height: 1.55; }

.cb__opt {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .7rem 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.cb__opt:first-of-type { border-top: 0; }
/* 20px is the smallest a tick target should be, and the label is part of it
   because the whole row is a <label>. */
.cb__opt input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: .1rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.cb__opt-text { display: flex; flex-direction: column; gap: .15rem; }
.cb__opt-label { font-size: var(--fs-min); line-height: 1.45; color: var(--text); }
.cb__opt-detail { font-size: var(--fs-meta); line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------- results */
.cb__results {
  background: var(--surface-dark);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
  color: rgba(var(--on-dark-rgb), .88);
}
.cb__results-title { font-size: 1.3rem; margin: 0 0 .4rem; color: var(--white); }
.cb__count { font-size: var(--fs-min); color: var(--accent-on-dark); margin: 0 0 1.1rem; line-height: 1.5; }

.cb__list { list-style: none; margin: 0; padding: 0; }
.cb__item {
  display: flex;
  gap: .7rem;
  padding: .75rem 0;
  border-top: 1px solid rgba(var(--on-dark-rgb), .16);
}
.cb__item:first-child { border-top: 0; }
/* The tick marker, drawn rather than shipped as an icon file. */
.cb__item::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 16px;
  margin-top: .2rem;
  border: solid var(--accent-on-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.cb__item-body { display: flex; flex-direction: column; gap: .2rem; }
.cb__item-title {
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--white);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.cb__req {
  font-size: var(--fs-meta);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--btn-accent-text);
  background: var(--btn-accent-bg);
  border-radius: var(--radius-pill);
  padding: .1rem .55rem;
}
.cb__item-note { font-size: var(--fs-meta); line-height: 1.5; color: rgba(var(--on-dark-rgb), .72); }

.cb__copy {
  font-family: inherit;
  font-size: var(--fs-min);
  font-weight: 700;
  color: var(--btn-accent-text);
  background: var(--btn-accent-bg);
  border: 0;
  border-radius: var(--radius-pill);
  padding: .5rem 1.1rem;
  margin-top: 1.2rem;
  cursor: pointer;
}
.cb__copy:hover { opacity: .9; }
.cb__foot { font-size: var(--fs-meta); color: rgba(var(--on-dark-rgb), .7); margin: 1rem 0 0; line-height: 1.5; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 64em) {
  .cb__grid { grid-template-columns: 1fr; }
}