/* css/lanes/checklist.css — owned by the "checklist" lane.
 *
 * THE TOKEN. --intl-orange is the product's teaching colour: International
 * Orange, #FF4F00. It marks THE ONE control the student is being taught right
 * now, and nothing else. It is deliberately distinct from --coral #FF5F3E
 * (the product's call-to-action colour, declared in css/base.css). Declared
 * once, HERE; every other lane reuses `var(--intl-orange)`.
 */
:root {
  --intl-orange: #FF4F00;
}

/* ------------------------------------------------------------ launcher */
.cl-launch {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 60;
  font: 600 12px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--ink, #e8e4dc);
  background: var(--surface-2, #1b1d1f);
  border: 1px solid var(--line, #34383c);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
}
.cl-launch:hover { border-color: var(--intl-orange); }
.cl-launch[hidden] { display: none; }
.cl-launch .cl-due {
  color: var(--intl-orange);
  margin-left: 6px;
}

/* ------------------------------------------------------------ main card */
.cl-root {
  position: fixed;
  right: 14px;
  top: 104px; /* below the sticky topbar (~95px when its nav wraps at 1440) */
  width: 340px;
  max-height: calc(100vh - 200px);
  z-index: 59;
  display: flex;
  flex-direction: column;
  background: var(--surface-1, #141618);
  border: 1px solid var(--line, #34383c);
  border-radius: 8px;
  color: var(--ink, #e8e4dc);
  font: 400 13px/1.45 Satoshi, system-ui, sans-serif;
  overflow: hidden;
}
.cl-root[hidden] { display: none; }

.cl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #34383c);
}
.cl-head h2 {
  flex: 1;
  margin: 0;
  font: 700 12px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cl-x {
  background: none;
  border: 0;
  color: var(--ink-dim, #9a958c);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
}
.cl-x:hover { color: var(--ink, #e8e4dc); }

.cl-body { overflow-y: auto; padding: 10px 12px 12px; }

/* list picker */
.cl-section-label {
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim, #9a958c);
  margin: 10px 0 6px;
}
.cl-lists { display: flex; flex-direction: column; gap: 4px; }
.cl-listbtn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  background: var(--surface-2, #1b1d1f);
  border: 1px solid var(--line, #34383c);
  border-radius: 5px;
  color: inherit;
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
}
.cl-listbtn:hover { border-color: var(--ink-dim, #9a958c); }
.cl-listbtn .cl-lname { flex: 1; }
.cl-listbtn .cl-lmeta {
  font: 500 10px/1 'JetBrains Mono', monospace;
  color: var(--ink-dim, #9a958c);
  white-space: nowrap;
}
.cl-listbtn .cl-lmeta.cl-due-now { color: var(--intl-orange); }
.cl-memtag {
  font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--intl-orange);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 2px 4px;
}

/* mode chips */
.cl-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.cl-mode {
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  border: 1px solid var(--line, #34383c);
  border-radius: 4px;
  background: none;
  color: var(--ink-dim, #9a958c);
  padding: 5px 8px;
  cursor: pointer;
}
.cl-mode[aria-pressed="true"] {
  color: var(--ink, #e8e4dc);
  border-color: var(--intl-orange);
}
.cl-mode:disabled { opacity: 0.4; cursor: not-allowed; }

/* the live item card */
.cl-item {
  margin-top: 10px;
  border: 1px solid var(--intl-orange);
  border-radius: 6px;
  padding: 10px 11px;
}
.cl-item .cl-step {
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: var(--ink-dim, #9a958c);
  letter-spacing: 0.08em;
}
.cl-item .cl-challenge {
  font-weight: 700;
  font-size: 15px;
  margin: 5px 0 2px;
}
.cl-item .cl-response {
  font: 600 13px/1.4 'JetBrains Mono', monospace;
  color: var(--intl-orange);
}
.cl-item .cl-response.cl-hidden { visibility: hidden; }
.cl-item .cl-why {
  margin-top: 6px;
  color: var(--ink-dim, #9a958c);
  font-size: 12px;
}
.cl-item .cl-note {
  margin-top: 6px;
  color: var(--ink-dim, #9a958c);
  font-size: 11px;
  border-left: 2px solid var(--line, #34383c);
  padding-left: 7px;
}
.cl-memchip {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 2px;
}

/* verification state line */
.cl-verify {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font: 500 11px/1.3 'JetBrains Mono', monospace;
  color: var(--ink-dim, #9a958c);
}
.cl-verify .cl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line, #34383c);
  flex: none;
}
.cl-verify.cl-waiting .cl-dot { background: var(--intl-orange); }
.cl-verify.cl-ok .cl-dot { background: var(--ok, #3fae6a); }
.cl-verify.cl-ok { color: var(--ok, #3fae6a); }

/* action buttons */
.cl-actions { display: flex; gap: 6px; margin-top: 9px; }
.cl-btn {
  flex: 1;
  font: 600 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  background: var(--surface-2, #1b1d1f);
  border: 1px solid var(--line, #34383c);
  border-radius: 5px;
  color: var(--ink, #e8e4dc);
  padding: 8px 6px;
  cursor: pointer;
}
.cl-btn:hover { border-color: var(--ink-dim, #9a958c); }
.cl-btn.cl-primary { border-color: var(--intl-orange); }
.cl-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* mic state */
.cl-mic {
  margin-top: 7px;
  font: 500 10px/1.4 'JetBrains Mono', monospace;
  color: var(--ink-dim, #9a958c);
}
.cl-mic .cl-mic-live { color: var(--intl-orange); }
.cl-mic .cl-heard { color: var(--ink, #e8e4dc); }

/* progress dots */
.cl-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 10px;
}
.cl-progress i {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--line, #34383c);
}
.cl-progress i.cl-done { background: var(--ok, #3fae6a); }
.cl-progress i.cl-now { background: var(--intl-orange); }
.cl-progress i.cl-lapse { background: var(--warn, #c9522a); }

/* honest stats block */
.cl-stats {
  margin-top: 10px;
  font: 500 11px/1.6 'JetBrains Mono', monospace;
  color: var(--ink-dim, #9a958c);
}
.cl-stats b { color: var(--ink, #e8e4dc); font-weight: 600; }
.cl-stats .cl-fsrs-note { font-size: 10px; }

/* run summary */
.cl-summary { margin-top: 10px; }
.cl-summary table {
  width: 100%;
  border-collapse: collapse;
  font: 500 11px/1.5 'JetBrains Mono', monospace;
}
.cl-summary td { padding: 2px 0; vertical-align: top; }
.cl-summary td:last-child { text-align: right; color: var(--ink-dim, #9a958c); }

/* unverified-in-sim label — honesty marker, always visible when relevant */
.cl-nosim {
  font: 600 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--ink-dim, #9a958c);
  border: 1px solid var(--line, #34383c);
  border-radius: 3px;
  padding: 2px 4px;
  white-space: nowrap;
}

/* ------------------------------------------------------------ highlight ring
 * Fallback ring used only until the AVIONICS lane's highlight() API lands.
 * One ring, positioned over the target control; pointer-events none so it can
 * never block the control it is pointing at. The pulse is opacity/ring width
 * only — no glow, no bloom (fleet non-negotiable #3).
 */
.cl-ring {
  position: fixed;
  z-index: 58;
  pointer-events: none;
  border: 3px solid var(--intl-orange);
  border-radius: 10px;
  box-sizing: border-box;
  animation: cl-pulse 1.6s ease-in-out infinite;
}
.cl-ring.cl-ring-correct {
  border-color: var(--ok, #3fae6a);
  animation: none;
}
.cl-ring.cl-ring-wrong {
  border-color: var(--warn, #c9522a);
  animation: none;
}
.cl-ring[hidden] { display: none; }

@keyframes cl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-ring { animation: none; }
}

@media (max-width: 900px) {
  .cl-root { width: min(340px, calc(100vw - 28px)); top: auto; bottom: 56px; }
}