/* ParaPrep, Standards Checklist tool (Brief 11) page styles.
   Reuses the design tokens + base components from styles.css (.check-row,
   .progress-wrap, .bar, .view-title, .btn) and the app shell from dashboard.css.
   Only adds what the gate, the per-domain accordion and the citations need. */

/* ---- Demo dev bar (only shown in demo mode), mirrors notes.css ---- */
.demo-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #eef5f4; border: 1px dashed var(--teal); color: var(--teal-dark);
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1.5rem; font-size: .82rem;
}
.demo-bar strong { font-weight: 700; }
.demo-bar .spacer { margin-left: auto; }
.btn.tiny { padding: .35rem .7rem; font-size: .8rem; }

/* ---- Upgrade prompt (paid gate), mirrors notes.css / tracks.css ---- */
.gate {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow);
}
.gate .lock { font-size: 2rem; }
.gate h2 { margin: .4rem 0 .5rem; font-size: 1.6rem; }
.gate p { margin: 0 0 1.2rem; opacity: .95; max-width: 60ch; }
.gate .gate-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn.on-teal { background: #fff; color: var(--teal-dark); }
.btn.on-teal:hover { background: #eef3ff; }
.gate .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.gate .btn.ghost:hover { background: rgba(255,255,255,.12); }
.gate ul.preview { margin: 1.3rem 0 0; padding: 0 0 0 1.1rem; opacity: .95; font-size: .92rem; }
.gate ul.preview li { margin: .25rem 0; }

/* ---- Overall progress card (top of the tool) ---- */
.cl-overall { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cl-overall .cl-pct { font-size: 2rem; font-weight: 800; color: var(--teal-dark); line-height: 1; }
.cl-overall .cl-meta { flex: 1 1 240px; min-width: 200px; }
.cl-overall .cl-meta strong { display: block; font-size: .95rem; }
.cl-overall .cl-meta .bar { margin-top: .55rem; }
.cl-overall .cl-actions { margin-left: auto; }
/* Armed state for the two-step "Reset progress" confirm. */
#clReset.armed { background: var(--red); border-color: var(--red); color: var(--surface); }

/* ---- Domain accordion ---- */
.cl-domain { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; box-shadow: var(--shadow); overflow: hidden; }
.cl-domain-head {
  width: 100%; display: flex; align-items: center; gap: .9rem; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 1rem 1.2rem; font: inherit;
}
.cl-domain-head:hover { background: #f8fbfb; }
.cl-domain-head .cl-caret { transition: transform .2s; color: var(--muted); font-size: .8rem; }
.cl-domain[open] .cl-caret, .cl-domain.open .cl-caret { transform: rotate(90deg); }
.cl-domain-title { margin: 0; display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.cl-domain-sub { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.cl-domain-head .cl-headbar { flex: 1 1 120px; max-width: 160px; }
.cl-domain-head .cl-headpct { font-size: .82rem; font-weight: 700; color: var(--teal-dark); min-width: 3ch; text-align: right; }
.cl-domain-body { padding: 0 1.2rem 1.2rem; }
.cl-domain-body[hidden] { display: none; }

/* ---- Module sub-grouping inside a domain ---- */
.cl-module { margin-top: 1.1rem; }
.cl-module:first-child { margin-top: .3rem; }
.cl-module > h4 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--teal-dark); margin: 0 0 .6rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--teal-soft);
}

/* ---- Item rows (extend styles.css .check-row + the shared .cl-item /
   .cl-note competency-link styles that live in styles.css, Brief 16) ---- */
.cl-source {
  display: inline-block; font-size: .68rem; letter-spacing: .02em;
  color: var(--muted); background: var(--teal-soft); border-radius: 999px; padding: .12rem .55rem;
}
/* On the paid tool, a ticked competency strikes through its link/text. */
.check-row.done .cl-item-link,
.check-row.done .cl-item-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--teal-soft); }
/* Here the coverage line sits directly beneath the overall-progress card. */
.cl-coverage { margin-top: -0.6rem; }

/* ---- Edition toggle (2026 current / 2014 legacy), extends .level-toggle ---- */
.edition-toggle button { display: inline-flex; align-items: center; gap: .3rem; }
.edition-toggle .edition-tag {
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--teal-soft); border-radius: 999px; padding: .04rem .35rem;
}
.edition-toggle button.active .edition-tag { color: #fff; background: rgba(255, 255, 255, .22); }

/* The active source called out in the view subtitle ("mapped to STN042 …"). */
.cl-active-source { color: var(--teal-dark); font-weight: 600; white-space: nowrap; }

/* ---- Attribution / copyright line ---- */
.cl-attribution {
  margin-top: 1.8rem; padding: .9rem 1.1rem; font-size: .8rem; color: var(--muted);
  background: #f8fbfb; border: 1px solid var(--line); border-radius: var(--radius);
}
.cl-attribution a { color: var(--teal-dark); font-weight: 600; }

@media (max-width: 620px) {
  .cl-domain-head .cl-headbar { display: none; }
  .cl-overall .cl-actions { margin-left: 0; }
}