/*
 * One colour per IELTS skill, on top of the black-and-white theme: progress bars, skill tabs, the current lesson and the
 * dashboard rows. Loaded last on every IELTS page. --skill-c is the colour, --skill-soft a light tint, --skill-on the text
 * colour that reads on --skill-c (white, or near-black on yellow). Done stays green.
 */
:is([data-skill-card="listening"], [data-dash-skill="listening"], [data-skill-roadmap="listening"], [data-dash-tool="listening-lab"],
    body[data-study-module="listening"]) { --skill-c: #2f6fed; --skill-soft: #e8efff; --skill-on: #fff; }
:is([data-skill-card="reading"], [data-dash-skill="reading"], [data-skill-roadmap="reading"], [data-dash-tool="reading-lab"],
    body[data-study-module="reading-skills"], body[data-study-module="reading-questions"]) { --skill-c: #0a8562; --skill-soft: #e1f5ee; --skill-on: #fff; }
:is([data-skill-card="writing"], [data-dash-skill="writing"], [data-skill-roadmap="writing"], [data-dash-tool="writing-check"],
    body[data-study-module="writing-task-1"], body[data-study-module="writing-task-2"]) { --skill-c: #bf540e; --skill-soft: #fff0e4; --skill-on: #fff; }
:is([data-skill-card="speaking"], [data-dash-skill="speaking"], [data-skill-roadmap="speaking"], [data-dash-tool="speaking-room"],
    body[data-study-module="speaking-1-2"], body[data-study-module="speaking-3"]) { --skill-c: #dc3037; --skill-soft: #fde8e9; --skill-on: #fff; }
:is([data-skill-card="vocabulary"], [data-dash-skill="vocabulary"], [data-skill-roadmap="vocabulary"],
    body[data-study-module="vocabulary"]) { --skill-c: #8b4fd1; --skill-soft: #f2eafc; --skill-on: #fff; }
:is([data-skill-card="grammar"], [data-dash-skill="grammar"], [data-skill-roadmap="grammar"], [data-dash-tool="challenge"],
    body[data-study-module="grammar"]) { --skill-c: #f3b400; --skill-soft: #fff6d4; --skill-on: #1a1400; }
:is([data-skill-card="strategy"], [data-dash-skill="strategy"], [data-skill-roadmap="strategy"],
    body[data-study-module="test-strategy"]) { --skill-c: #0a7e9e; --skill-soft: #e0f3f9; --skill-on: #fff; }
[data-dash-tool="mock-exam"] { --skill-c: #4b5563; --skill-soft: #eceef1; --skill-on: #fff; }
[data-dash-tool="plan"] { --skill-c: #5b5bd6; --skill-soft: #ececfd; --skill-on: #fff; }

/* Progress bars take the skill colour; a finished bar stays green. */
body[data-study-mode="ielts"] .progress-fill { background: var(--skill-c, #000); }
body[data-study-mode="ielts"] [data-complete="true"] > .progress-fill,
body[data-study-mode="ielts"] .progress-fill[data-complete="true"] { background: #11643f; }

/* Dashboard: a colour stripe per row, tinted thumbnails, the ring in the skill's colour. */
.dash-row[data-dash-skill], .dash-row[data-dash-tool] { box-shadow: inset 4px 0 0 var(--skill-c); }
:is(.dash-row, .dash-continue) .dash-thumb { background: var(--skill-soft, #fff); }
.dash-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.dash-row .skill-percent { color: #111; }
.dash-continue[data-dash-skill] .dash-ring { background: radial-gradient(closest-side, var(--dash-card) 77%, transparent 79% 100%),
  conic-gradient(var(--skill-c) calc(var(--p) * 1%), #d9d9d9 0); }
.dash-continue[data-dash-skill] { box-shadow: inset 4px 0 0 var(--skill-c); }

/* Roadmap: the skill tabs carry their colour; the open one is filled with it. */
body[data-study-mode="ielts"] .skills.is-focused .skill-card a { border-top: 4px solid var(--skill-c); }
body[data-study-mode="ielts"] .skills.is-focused .skill-card a[aria-current="true"] { background: var(--skill-c); border-color: var(--skill-c); }
body[data-study-mode="ielts"] .skills.is-focused .skill-card a[aria-current="true"] :is(.skill-name, .skill-meta, .skill-percent) { color: var(--skill-on); }
body[data-study-mode="ielts"] .skills.is-focused .skill-card a[aria-current="true"] .progress { background: rgba(255, 255, 255, .35); }
body[data-study-mode="ielts"] .skills.is-focused .skill-card a[aria-current="true"] .progress-fill { background: var(--skill-on); }
body[data-study-mode="ielts"] .roadmap[data-skill-roadmap] { border-top: 6px solid var(--skill-c); }
body[data-study-mode="ielts"] [data-skill-roadmap] .roadmap-head .kicker { color: var(--skill-c); }
body[data-study-mode="ielts"] [data-skill-roadmap] .rm-stage-head .rm-stage-n { background: var(--skill-c); color: var(--skill-on); }
body[data-study-mode="ielts"] [data-skill-roadmap] .rm-step[data-state="next"] a { border-color: var(--skill-c); background: var(--skill-soft);
  box-shadow: 4px 4px 0 var(--skill-c); }
body[data-study-mode="ielts"] [data-skill-roadmap] .rm-step[data-state="next"] .rm-dot { border-color: var(--skill-c); background: var(--skill-soft);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--skill-c); }
body[data-study-mode="ielts"] [data-skill-roadmap] .rm-step-type { color: var(--skill-c); }
body[data-study-mode="ielts"] [data-skill-roadmap="grammar"] .rm-step-type { color: #8a6500; }
body[data-study-mode="ielts"] [data-skill-roadmap] .roadmap-next { background: var(--skill-c); border-color: var(--skill-c); color: var(--skill-on); }

/* Lesson and exercise pages: the current step, the step pill and the key-term highlight in the skill's colour. */
body[data-study-mode="ielts"][data-study-module] .step-outline .outline-step.current a { background: var(--skill-c); color: var(--skill-on); }
body[data-study-mode="ielts"][data-study-module] .step-outline .outline-step.current .outline-type { color: var(--skill-on); opacity: .85; }
body[data-study-mode="ielts"][data-study-module] .step-outline .outline-step.current a::before { border-color: var(--skill-on); }
body[data-study-mode="ielts"][data-study-module] .step-outline .outline-n { color: var(--skill-c); }
body[data-study-mode="ielts"][data-study-module="grammar"] .step-outline .outline-n { color: #8a6500; }
body[data-study-mode="ielts"][data-study-module] .step-pill { background: var(--skill-c); color: var(--skill-on); }
body[data-study-mode="ielts"][data-study-module] .lesson-body strong { background: linear-gradient(transparent 60%, var(--skill-soft) 60%); }
body[data-study-mode="ielts"][data-study-module] .lesson-tip { background: var(--skill-soft); border-color: var(--skill-c); }
body[data-study-mode="ielts"][data-study-module] .crumbs a:last-child { color: var(--skill-c); }

/* Roadmap cards: lift on hover in the skill's colour. */
body[data-study-mode="ielts"] .rm-step a, body[data-study-mode="ielts"] .skills.is-focused .skill-card a {
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, background-color .2s; }
body[data-study-mode="ielts"] [data-skill-roadmap] .rm-step a:hover { transform: translateY(-3px); border-color: var(--skill-c);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--skill-c) 60%, transparent); }
body[data-study-mode="ielts"] .skills.is-focused .skill-card a:hover { transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--skill-c) 70%, transparent); }
body[data-study-mode="ielts"] .step-outline .outline-step a { transition: background-color .2s, transform .2s; }
body[data-study-mode="ielts"][data-study-module] .step-outline .outline-step:not(.current) a:hover { background: var(--skill-soft); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  body[data-study-mode="ielts"] :is(.rm-step a, .skill-card a, .outline-step a) { transition: none; transform: none !important; }
}