/* ---------------------------------------------------------------
   The Full System Checklist.

   The wall is the point of the page. Four sequential layers stacked
   with Signal at the bottom, Soil as the ground they sit on, and
   Personal Brand as a column running the full height, because that is
   how the layers actually relate in the book. Everything else here is
   deliberately quiet.
   --------------------------------------------------------------- */

.cl { padding-block: clamp(32px, 4.5vw, 64px); }

.cl__grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }

@media (min-width: 1000px) {
  .cl__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
  .cl__wall { position: sticky; top: calc(var(--nav-h) + 24px); }
}

.wall__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   The wall
   --------------------------------------------------------------- */
.wall__figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  grid-template-areas:
    'stack  column'
    'ground ground';
  gap: 6px;
  margin-top: 16px;
}

.wall__stack { grid-area: stack; display: flex; flex-direction: column; gap: 6px; }

.band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  background-color: var(--bg);
  /* Hatching reads as ground that has not been built on yet. */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(61, 29, 6, 0.055) 0 1px,
    transparent 1px 8px
  );
  transition: border-color 0.2s ease;
}

.band--stack { height: 62px; grid-area: auto; }
.band--column { grid-area: column; padding: 14px 0; }
.band--ground { grid-area: ground; height: 52px; }

.band__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: var(--accent);
  transition: width 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The column fills upward, the way the founder's own presence accrues. */
.band--column .band__fill {
  inset: auto 0 0 0;
  width: auto;
  height: var(--fill, 0%);
  transition: height 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.band__name,
.band__count {
  position: relative;
  z-index: 1;
}

.band__name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.band__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.band--column {
  flex-direction: column-reverse;
  justify-content: space-between;
}

.band__name--vertical,
.band__count--vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.band__name--vertical { font-size: 12px; letter-spacing: 0.02em; }
.band__count--vertical { letter-spacing: 0.1em; }

.band:hover { border-color: var(--ink); }

/* The one band worth looking at. */
.band[data-weakest] {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}

/* ---------------------------------------------------------------
   Verdict and tally
   --------------------------------------------------------------- */
.wall__note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.verdict {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-2);
}

.verdict__empty,
.verdict__hint {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.verdict__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.verdict__name {
  margin-top: 6px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.verdict__hint { margin-top: 8px; }

.tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
}

.tally__count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tally__saved { font-size: 11px; letter-spacing: 0.06em; color: var(--muted-2); }



/* ---------------------------------------------------------------
   The checks
   --------------------------------------------------------------- */
.group + .group { margin-top: clamp(32px, 4vw, 52px); }

.group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}

.group__name {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.group__desc { margin-top: 6px; font-size: 14px; color: var(--body-2); }

.group__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.check { border-bottom: 1px solid var(--rule); }

.check__label {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  cursor: pointer;
}

.check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.check__box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--rule-2);
  border-radius: 3px;
  background: var(--bg);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.check__label:hover .check__box { border-color: var(--ink); }

/* Ticks are brown, not gold. The wall is the only thing on this page that
   gets to use the accent, so twenty-six gold squares would compete with it. */
.check__input:checked + .check__box {
  background: var(--ink);
  border-color: var(--ink);
  position: relative;
}

.check__input:checked + .check__box::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

.check__input:focus-visible + .check__box {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.check__text {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--body);
  transition: color 0.18s ease;
}

.check__input:checked ~ .check__text { color: var(--muted-2); }

.cl__foot {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------------------------------------------------------------
   Paper
   --------------------------------------------------------------- */
@media print {
  .nav,
  .site-footer,
  .tools,
  .skip-link,
  .page-head__note,
  .cl__foot,
  .wall__note { display: none !important; }

  .page-head { padding-top: 0; }

  .cl__grid { grid-template-columns: 1fr; gap: 24px; }
  .cl__wall { position: static; }

  .band,
  .band__fill,
  .check__input:checked + .check__box {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .group { break-inside: avoid; }
  .check__label { padding: 9px 0; }
  .check__text { font-size: 12px; }
}