/*
 * CP-11 Setup checklist — app/components/ui/setup_checklist_component.rb
 *
 * Header row (heading + segmented progress + dismiss), row layout
 * (mark/body/CTA), the empty-circle mark stand-in (no dedicated icon
 * exists), and the done-row strikethrough/collapse treatment.
 */

.ui-cp11__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ui-cp11__heading {
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
  flex: 1;
}

.ui-cp11__progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-cp11__progress .ui-progress {
  width: 64px;
}

.ui-cp11__progress-text {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.ui-cp11__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-cp11__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ui-cp11__mark {
  width: var(--space-6);
  height: var(--space-6);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-cp11__mark--empty {
  color: var(--color-ink-muted);
}

.ui-cp11__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.ui-cp11__body-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ui-cp11__label {
  color: var(--color-ink);
}

.ui-cp11__rationale {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/*
 * Collapse + strikethrough for completed rows. The mark icon (non-text)
 * still fades to 60% opacity; the label and rationale text stay fully
 * opaque and instead get the de-emphasised look from ink-muted plus the
 * strikethrough.
 */
.ui-cp11__row--done .ui-cp11__label {
  color: var(--color-ink-muted);
  text-decoration: line-through;
}

.ui-cp11__row--done .ui-cp11__mark {
  opacity: 0.6;
}

/*
 * Disclosure for completed items — native <details>/<summary>, same
 * approach as Ui::AccordionComponent (free keyboard/screen-reader
 * behaviour, no Stimulus controller needed). The "Show n completed" /
 * "Hide completed" text swap is pure CSS: both labels always render,
 * and `[open]` toggles which one is visible — no JS required to keep
 * them in sync with the disclosure state.
 */
.ui-cp11__disclosure {
  margin-top: var(--space-4);
}

.ui-cp11__disclosure .ui-cp11__list--completed {
  margin-top: var(--space-4);
}

/*
 * State the collapse explicitly rather than inheriting it from the browser's
 * <details> model. .ui-cp11__list sets `display: flex`, and it sits on a direct
 * child of <details> — in the pre-::details-content model an author `display`
 * declaration beats the UA rule `details:not([open]) > :not(summary) { display:
 * none }`, so the completed items would stay fully visible underneath a toggle
 * reading "Show n completed items" and the collapse would silently do nothing.
 * accordion.css exploits that same override deliberately, to keep collapsed
 * content laid out so its height can animate; there is no height animation
 * here, so inheriting it is a defect rather than a feature.
 */
.ui-cp11__disclosure:not([open]) .ui-cp11__list--completed {
  display: none;
}

.ui-cp11__disclosure-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-muted);
}

.ui-cp11__disclosure-summary::-webkit-details-marker {
  display: none;
}

.ui-cp11__disclosure-label--open {
  display: none;
}

.ui-cp11__disclosure[open] .ui-cp11__disclosure-label--open {
  display: inline;
}

.ui-cp11__disclosure[open] .ui-cp11__disclosure-label--closed {
  display: none;
}

.ui-cp11__disclosure-chevron {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  transition: transform var(--duration-base) var(--ease-out);
}

.ui-cp11__disclosure[open] .ui-cp11__disclosure-chevron {
  transform: rotate(180deg);
}