/*
 * "Before you build" (Kiln/UI/ChecklistView.swift): everything the analyst assumed or couldn't settle, rules from
 * outside the business first, each with the rule it belongs to and what the owner said about it.
 */
.checklist { padding: 26px 28px 36px; display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
@media (max-width: 599px) {
  .checklist { padding: 18px 16px 28px; }
}
.checklist-head { display: flex; flex-direction: column; gap: 6px; }
.checklist-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.checklist-title { font-size: 24px; }
.checklist-intro { font-size: 14px; color: var(--ink-soft); }

/* Whether the analyst has checked it over as it stands (CheckedOverLine). */
.checked-over { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--inset) 75%, transparent); font-size: 13.5px; }
.checked-over svg { width: 15px; height: 15px; flex: none; color: var(--ink-soft); }
.checked-over--done svg { color: var(--pass); }
.checked-over--waiting svg { color: var(--wait); }

/* One thing to check (ChecklistRow). */
.check {
  --tint: var(--wait); --tint-text: var(--wait-text);
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 14px 20px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--card); box-shadow: var(--shadow);
  overflow: hidden;
}
.check::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tint); }
.check--outside, .check--disagrees { --tint: var(--alert); --tint-text: var(--alert); }
.check--outside:not(.check--done) { border-color: color-mix(in srgb, var(--alert) 45%, transparent); background: color-mix(in srgb, var(--alert) 5%, var(--card)); }
.check--assumed { --tint: var(--info); --tint-text: var(--info); }
.check--done { --tint: var(--pass); box-shadow: none; opacity: 0.8; }
.check-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; }
.check-label { display: inline-flex; align-items: flex-start; gap: 7px; font-size: 13px; font-weight: 600; color: var(--tint-text); }
.check-label svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.check-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--pass); }
.check-done svg { width: 14px; height: 14px; }
.check-text { font-size: 15px; font-weight: 550; line-height: 1.5; }
.check--done .check-text { font-weight: 400; }
.check-detail { font-size: 13.5px; color: var(--ink-soft); }
.check-rule { font-size: 13px; color: var(--ink-soft); }
.check-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.check-actions form { margin: 0; }