/* infoMogli — Website Launch Checker (and future checker-style tools).
   Reuses .g-prose (guide-styles.css) for the editorial content below the
   tool. Scoped under .chk-*. */

.chk-page{ padding-top: 40px; }

.chk-header{ max-width: 760px; margin: 0 auto; padding: 0 32px; }
.chk-breadcrumb{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  margin-bottom: 22px;
}
.chk-breadcrumb a{ color: var(--ink-3); }
.chk-breadcrumb a:hover{ color: var(--accent-ink); text-decoration: underline; }
.chk-breadcrumb .sep{ color: var(--hair-2); }

.chk-eyebrow{
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-ink);
  display: block; margin-bottom: 12px;
}
.chk-h1{
  font-family: var(--serif); font-weight: 500;
  font-size: 40px; line-height: 1.15; letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
}
.chk-deck{
  margin-top: 12px;
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  color: var(--ink-2); max-width: 58ch;
}
.chk-labels{ margin-top: 16px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Tool shell ────────────────────────────────────────────────── */
.chk-tool{
  max-width: 920px; margin: 36px auto 0; padding: 0 32px;
}
.chk-panel{
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

/* Progress */
.chk-progress-bar{
  padding: 20px 24px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.chk-progress-top{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.chk-progress-label{
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
}
.chk-progress-count{
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
}
.chk-progress-track{
  height: 6px; border-radius: 3px; background: var(--hair);
  overflow: hidden;
}
.chk-progress-fill{
  height: 100%; background: var(--accent);
  border-radius: 3px; transition: width .2s ease;
  width: 0%;
}
.chk-reset{
  margin-top: 14px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-3);
  background: transparent; border: 1px solid var(--hair-2);
  border-radius: var(--r); padding: 6px 12px; cursor: pointer;
  min-height: 32px;
}
.chk-reset:hover{ border-color: var(--ink-3); color: var(--ink); }

/* Groups: native <details> for accessible, JS-free expand/collapse */
.chk-group{ border-bottom: 1px solid var(--hair); }
.chk-group:last-child{ border-bottom: none; }
.chk-group__summary{
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  cursor: pointer;
  font-family: var(--sans); font-size: 17px; font-weight: 500; color: var(--ink);
  min-height: 52px;
}
.chk-group__summary::-webkit-details-marker{ display: none; }
.chk-group__summary .n{
  font-family: var(--mono); font-size: 13px; color: var(--ink-3); font-weight: 400;
}
.chk-group__summary .n.done{ color: var(--accent-ink); }
.chk-group__chev{ color: var(--ink-3); transition: transform .18s ease; flex: 0 0 auto; }
.chk-group[open] .chk-group__chev{ transform: rotate(180deg); }

.chk-group__body{ padding: 6px 24px 22px; }
.chk-item{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 4px; border-top: 1px solid var(--hair);
  border-radius: var(--r);
  transition: background .14s ease;
}
.chk-item:hover{ background: var(--surface-2); }
.chk-group__body .chk-item:first-child{ border-top: none; }
.chk-item input[type="checkbox"]{
  width: 22px; height: 22px; margin: 2px 0 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
  cursor: pointer;
}
.chk-item label{
  font-family: var(--sans); font-size: 16.5px; line-height: 1.45; color: var(--ink);
  cursor: pointer;
  display: block;
  padding: 2px 0;
}
.chk-item.done label{ color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--hair-2); }
.chk-item__why{ margin-top: 5px; }
.chk-item__why summary{
  font-family: var(--sans); font-size: 13.5px; color: var(--accent);
  cursor: pointer; list-style: none;
  min-height: 28px; display: inline-flex; align-items: center;
}
.chk-item__why summary::-webkit-details-marker{ display: none; }
.chk-item__why p{
  margin: 6px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
}

.chk-complete{
  padding: 18px 24px;
  background: var(--accent-soft);
  border-top: 1px solid var(--hair);
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  display: none;
}
.chk-complete.show{ display: block; }
.chk-complete strong{ color: var(--accent-ink); }

/* ── Editorial content below (uses .g-prose from guide-styles.css) ── */
.chk-editorial{
  max-width: 720px; margin: 64px auto 0; padding: 0 32px;
}
.chk-editorial .g-prose > * + *{ margin-top: 20px; }
.chk-editorial h2{ margin-top: 44px; }
.chk-editorial h2:first-child{ margin-top: 0; }

.chk-faq details{
  border-top: 1px solid var(--hair);
  padding: 14px 0;
}
.chk-faq details:last-child{ border-bottom: 1px solid var(--hair); }
.chk-faq summary{
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 12px;
  min-height: 24px;
}
.chk-faq summary::-webkit-details-marker{ display: none; }
.chk-faq summary::after{ content: "+"; color: var(--ink-3); font-family: var(--mono); }
.chk-faq details[open] summary::after{ content: "−"; }
.chk-faq p{
  margin: 10px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
}

.chk-ending{ max-width: 720px; margin: 48px auto 0; padding: 0 32px; }

@media (max-width: 720px){
  .chk-header, .chk-tool, .chk-editorial, .chk-ending{ padding: 0 20px; }
  .chk-h1{ font-size: 28px; }
  .chk-group__summary{ padding: 14px 18px; }
  .chk-group__body{ padding: 4px 18px 16px; }
  .chk-progress-bar{ padding: 16px 18px; }
}