/* Tutor course wizard (cw-*) — v6. Replaces tutor-wizard-fix.v5.css.
   v6: four-step bar with a line icon per step (app r221).
   Root cause of the mixed light/dark look: the wizard rules in styles.css
   read var(--card), var(--bg) and var(--muted), which the app never defines,
   so every surface fell back to a hard-coded DARK colour in both themes.
   The app's theme switch is :root[data-theme="light|dark"] (theme-init.js),
   not body.dark-mode / body.light-mode. Everything below uses the app's own
   tokens, so both themes follow automatically. */

/* ---- 1. Theme tokens, scoped to wizard elements only ---- */
.cw-shell, .cw-steps, .cw-footer, .cw-field, .cw-gen-list, .cw-quiz-list{
  --cw-surface:var(--popup-surface,#14202E);
  --cw-field:var(--popup-field-surface,#0D1824);
  --cw-text:var(--offwhite,#F5F3EC);
  --cw-text-dim:var(--offwhite-dim,#B7C4CE);
  --cw-line:var(--navy-line,rgba(255,255,255,.14));
  --cw-accent:#1c4fd6;
  --cw-ok:#166534;
  --cw-ok-ring:#22c55e;
  --cw-chip:rgba(255,255,255,.07);
  color:var(--cw-text);
}
:root[data-theme="light"] .cw-shell,
:root[data-theme="light"] .cw-steps,
:root[data-theme="light"] .cw-footer,
:root[data-theme="light"] .cw-field,
:root[data-theme="light"] .cw-gen-list,
:root[data-theme="light"] .cw-quiz-list{
  --cw-line:rgba(20,40,60,.18);
  --cw-chip:rgba(20,40,60,.06);
  --cw-ok-ring:#166534;
}

/* ---- 2. Surfaces and text ---- */
.cw-label{color:var(--cw-text);opacity:.8}
.cw-hint,.cw-save-step,.cw-video-url{color:var(--cw-text-dim);opacity:1}
.cw-input,.cw-textarea{
  background:var(--cw-field)!important;
  color:var(--cw-text)!important;
  border:1px solid var(--cw-line)!important;
}
.cw-input::placeholder,.cw-textarea::placeholder{color:var(--cw-text-dim);opacity:.8}
.cw-input:focus,.cw-textarea:focus{outline:none;border-color:var(--cw-accent)!important;box-shadow:0 0 0 3px rgba(28,79,214,.22)}
.cw-pill{color:var(--cw-text);border-color:var(--cw-line);background:transparent}
.cw-pill.is-on{background:var(--cw-accent);border-color:var(--cw-accent);color:#fff}
.cw-gen-card,.cw-quiz-card{
  background:var(--cw-surface)!important;
  color:var(--cw-text)!important;
  border-color:var(--cw-line)!important;
}
.cw-gen-opt,.cw-quiz-opts li{background:var(--cw-chip);color:var(--cw-text)}
.cw-gen-check{border-color:var(--cw-line);color:#fff}
.cw-quiz-opt-mark{border-color:var(--cw-line);color:#fff}
.cw-test-a{background:var(--cw-chip);border:1px solid var(--cw-line);color:var(--cw-text)}

/* ---- 3. Quiz contrast: selected / correct answer = dark green + white ---- */
.cw-gen-opt.is-correct,
.cw-quiz-opts li.is-correct{
  background:#166534!important;
  color:#fff!important;
  font-weight:600;
}
.cw-quiz-opt.is-correct .cw-input{
  background:#166534!important;
  border-color:#166534!important;
  color:#fff!important;
  caret-color:#fff;
  -webkit-text-fill-color:#fff;
}
.cw-quiz-opt.is-correct .cw-input::placeholder{color:rgba(255,255,255,.75)}
.cw-quiz-opt.is-correct .cw-quiz-opt-mark,
.cw-gen-card.is-selected .cw-gen-check{background:#166534!important;border-color:#166534!important;color:#fff!important}
.cw-gen-card.is-selected{border-color:var(--cw-ok-ring)!important;box-shadow:0 0 0 1px var(--cw-ok-ring)}

/* ---- 4. Redundant heading: the header pill already says it ---- */
h2.cw-title{display:none!important}

/* ---- 5. Footer: no slab behind the buttons ---- */
div.cw-footer{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* ---- 6. Progress bar: circles joined by a track (any number of steps) ---- */
.cw-steps{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:0;margin:8px 0 22px;padding:0 2px;
}
.cw-step{
  position:relative;flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 2px;border-radius:0;background:none!important;
  font-size:11.5px;line-height:1.25;font-weight:600;text-align:center;
  color:var(--cw-text-dim)!important;
}
/* track segment running to the previous step */
.cw-step::before{
  content:"";position:absolute;top:16px;right:50%;width:100%;height:3px;
  margin-top:-1.5px;background:var(--cw-line);border-radius:3px;
}
.cw-step:first-child::before{display:none}
.cw-step.is-done::before,.cw-step.is-current::before{background:#166534}
.cw-step b{
  position:relative;z-index:1;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--cw-surface)!important;border:2px solid var(--cw-line);
  color:var(--cw-text-dim);font-size:13px;font-weight:700;
}
.cw-step.is-current{color:var(--cw-text)!important}
.cw-step.is-current b{
  background:var(--cw-accent)!important;border-color:var(--cw-accent);color:#fff;
  box-shadow:0 0 0 4px rgba(28,79,214,.22);
}
.cw-step.is-done{color:var(--cw-text)!important}
/* r221 markup: <b><svg/></b><span class="cw-step-label">…</span> */
.cw-step b svg{width:17px;height:17px;display:block}
.cw-step-label{display:block;max-width:100%;overflow-wrap:anywhere}
/* finished step: its icon is swapped for an SVG tick */
.cw-step.is-done b{
  background:#166534!important;border-color:#166534;color:transparent;font-size:0;
}
.cw-step.is-done b svg{display:none}
.cw-step.is-done b::after{
  content:"";width:16px;height:16px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cw-shell .c-no-num{color:var(--cw-text)}