:root {
  /* Stroke widths */
  --stroke-thin: 0.2;
  --stroke-medium: 0.4;
  --stroke-thick: 0.7;
  --stroke-heavy: 0.9;
  --stroke-arrow: 1.3;
  --stroke-grid-large: 2.5;

  /* Opacities */
  --opacity-skin: 0.5;
  --opacity-caption-switch: 0.5;
  --opacity-toggle-selected: 0.1;

  /* Font sizes */
  --font-xs: 3px;
  --font-sm: 6px;
  --font-md: 9px;
  --font-caption: 1.1em;

  /* Other */
  --badge-radius: 12px;
}

/* =====================================================
   1. LAYOUT, PROGRESS & OBJECTIVES
===================================================== */
.progress-wrap {
  border-radius: 999px;
  height: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.progress-wrap .progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(85, 197, 122, 0.85), rgba(42, 151, 198, 0.85));
  transition: width 0.35s ease;
}
.lead, .progress-wrap {max-width:560px;
margin:0 auto;}
/* =====================================================
   2. UNITS & APPENDIX
===================================================== */
#unit-container {
  width: 100%;
}
.unit {
  background: none;
  position: relative;
  overflow-x: auto;
  background:var(--white);
}
.unit-header, .appendix-header{
  align-items:center;  
  padding: 0 9px;
  transition:all 0.3s ease;
}
.appendix-header {
  background: var(--colour2);
  align-content: flex-start;
}
.final-challenge .appendix-header {
  background: var(--colour1);
}
h2 {
  width: 100%;
  padding: 1rem 1rem 1rem 1.8rem;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin: 0;
}
.appendix-header h2 {  
  color: var(--dull-white);
}
h3 {
  margin-left: 24px;
  font-size: 1.1rem;
  width: 100%;
  display: list-item;
}
.unit-header > svg,
.appendix-header > svg, #chapterAccordion svg {
  flex-shrink: 0;
  stroke: var(--white);
  fill: none;
  padding: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  background: linear-gradient(120deg, #2a97c6, #43a047);
  opacity: 0.6;
}
#chapterAccordion svg {
  background: inherit;
  stroke: var(--black);
  stroke-width: 1.4px;
  width: 65px;
  padding: 6px 16px 6px 0px;
}
#chapterAccordion .results svg {
  width:20px;
  height:20px;
  padding:0;
}
.appendix-header > svg,
.final-challenge .unit-header > svg {
  background: var(--white);
}
.unit-banner {
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  border-image: linear-gradient(to right, var(--colour1), var(--colour2));
  border-image-slice: 1;
  height: 260px;
  width: 100%;
}
.unit-content {
  max-height: 0;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.unit-svg > svg {
  height: auto;
  border: 4px solid var(--colour1);
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  background:var(--light-grey);
}
.unit-footer {
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 6px;
  align-items: center;
  width:100%;
}
.appendix .card {
  margin: 2rem auto;
  padding: 1rem 2rem;
  background: var(--light-grey);
  border: 2px solid var(--colour1-light);
  border-radius: 12px;
}
/* =====================================================
   4. EXTENSIONS
===================================================== */
.unit.extension {
  background: var(--light-grey);
}
.extension .unit-header,
#chapterAccordion .extension {
  font-style: italic;
  color: var(--colour1-dark);
}
.extension h3::before {
  content: 'Challenge: ';
}
/* =====================================================
   5. ICONS & TROPHIES
===================================================== */
.xp-shield {
  width: 160px;
  margin: 1.5rem auto;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(255, 199, 0, 0.4));
  transition: transform 0.25s ease;
}
.xp-shield:hover {
  transform: translateY(-3px) scale(1.05) rotate(-2deg);
}
.xp-value {
  font: 900 22px / 1 monospace;
  fill: var(--colour4);
  stroke: var(--black);
}
.badge.locked .shield-lock {
  stroke: #a00;
  stroke-width: 4px;
  stroke-linecap: round;
}
.badge.unlocked svg path {
  fill: url(#gold-gradient);
  stroke: #b8860b;
  stroke-width: 3px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
}
.badge.pop, .complete .tick-badge {
  animation: pop 0.5s ease forwards;
}
.tick-badge {
  display: inline-block;
  vertical-align: middle;
  color: var(--bs-success, #2ecc71);
  transform: scale(0.7);
  opacity: 0;
  width: 30px;
  height: 30px;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.tick-badge .tb-check {
  stroke: var(--colour2);
  stroke-width: 8px; 
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60; 
  transition: stroke-dashoffset 0.45s ease 0.08s;
}  
.complete .tick-badge .tb-check {
  stroke-dashoffset: 0; /* draw the tick */
}
.unit-flag-icon {
  transform: scale(1.9);
  position:relative;
  top:-4.5px;
}
#chapterAccordion
  .unit-flag-icon {
    transform:scale(1);
    position: relative;
    top:0;

}
.unit-triage-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
}
.menu-unit .unit-triage-icon {
  width:16px;
  height:16px;
  font-size:0.8em
}
.menu-unit.active {
  background: var(--colour2-light);
  border-radius: 0 20px 20px 0;
}
.home:hover{
  background:var(--light-grey);
}
/* =====================================================
   6. BUGS
===================================================== */
.bugs {
  column-count: 3;
}
.bug {
  position: relative;
  border-radius: 20px;
  perspective: 1000px;
  margin: 10px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
}
.bug-inner {
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.bug.flipped .bug-inner {
  transform: rotateY(180deg);
}
.bug-front, .bug-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  padding: 6px 12px;
  box-sizing: border-box;
}
.bug-front {
  background: var(--white);
  color: var(--black);
  z-index: 2;
  transform: rotateY(0deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bug-back {
  background: var(--colour2-light);
  color: var(--colour2-dark);
  transform: rotateY(180deg);
  position: relative;
  min-height: 200px;
}

/* Consolidated bug types */
.bug-misconception { border: 2px dashed var(--colour3); background: #fff9e6; }
.bug-error { border: 2px solid var(--colour5); background: var(--white) }
.bug-definition-debates { border: 2px dotted var(--colour4); }
.bug-shortcut { border: 2px solid var(--colour2); background: linear-gradient(90deg, var(--colour2-light), var(--white)); }
.bug-mnemonic { border: 2px dotted var(--colour4); background: #fff8f5; font-style: italic; }
.bug-tip { border: 2px solid var(--colour1); background: rgba(42, 151, 198, 0.05); }
.bug-overgeneralisation { border: 2px solid orange; background: #fff7ed; }
.bug-anchoring { border-top: 6px solid navy; border: 2px solid #ccc; background: #f9f9ff; }
.bug-omission { border: 2px solid gray; background: linear-gradient(135deg, #f2f2f2 70%, transparent 71%); }
.bug-confirmation { border: 2px solid purple; background: repeating-linear-gradient(-45deg, #faf5ff, #faf5ff 10px, #f0e6ff 10px, #f0e6ff 20px); }
.bug-chunking { border: 2px solid teal; background: #e6fffa; }
.bug-closure { border: 2px solid brown; background: #fff3f0; }
.bug-randomisation { border: 2px solid hotpink; background: #fff0fa; }
.bug-pearl { border: 2px solid goldenrod; background: linear-gradient(135deg, #fffbe6, var(--white)); }
.bug-stumbling-point { border: 2px solid #607d8b; background: var(--light-grey)}
.bug-alternative { border: 2px solid var(--colour6); background: linear-gradient(135deg, var(--colour6) 0%, var(--white) 90%); }
.bug-historical { border: 2px solid #a67c52; background: var(--colour3-light);}
.bug-zebras { border: 4px dashed var(--grey); background: repeating-linear-gradient(-45deg, var(--light-grey), var(--light-grey) 10px, var(--white) 10px, var(--white) 20px); }


/* =====================================================
   7. TRIAGE
===================================================== */
.triage-summary h3 { 
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--black);
  color: var(--white);
  padding: 6px 12px;
  margin:0;
}
#ulogs {  
  border: 3px dotted;
  border-radius: 20px;
}
#ulogs .card {
     margin:0;
     padding:0;
     border: 3px solid var(--white);
     border-radius: 20px;
}
.triage-legend {
  border: 2px solid var(--black);
  border-radius: 10px;
  padding: 1rem;
  background: var(--white);
  max-width: 500px;
}

.triage-legend h4 {
  margin: 0 0 .5rem;
  font-weight: 700;
}

.triage-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.triage-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .3rem 0;
  font-size: .95rem;
}

.triage-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--black);
  font-size: .8rem;
  font-weight: 700;
}

.unit-triage input[type="radio"],
  .unit-flags input[type="radio"] {
    display: none;
  }
  
  .triage-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 0.25rem;
    border-radius: 50%;
    border: 2px solid var(--black);
    font-weight: bold;
    cursor: pointer;
    background: #f9f9f9;
    transition: all 0.2s;
    opacity: 0.6;
  }
  .triage-complete-option{
    border-radius: 3px;
    width: 100px;
    display: flex;
  color:var(--black) !important;}
  /* Selected state (when input is checked) */
  .triage-option input[type="radio"]:checked + .triage-circle {
    color: white;
    border-color: black;
    transform: scale(1.5);
    border: 3px solid var(--black);
    opacity: 1;
  }
  
  /* Flag icons */
  .flag-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    margin: 0.25rem;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.2s;
  }
  
  /* Selected flag */
  .flag-option input[type="radio"]:checked + .flag-icon {
    border-color: var(--colour1, #2A97C6);
    background: #e6f0fa;
    transform: scale(1.5);
  }
  .results {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding-right: 20px;
    border-radius: 20px;
    background: var(--light-grey);
    padding: 3px;
    border: 2px solid var(--grey);
    margin: 0 20px;
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  #chapterAccordion .results {
    position: absolute;
    right: 4px;
    margin: 0;
    padding: 0;
    height: 20px;
  }
  .results.fading-out {
    opacity: 0;
  }
  .log-updated {color:#c6c8cb;
    font-size:0.7em;}
    .results-star1,
    .results-star2,
    .results-star3 {
      fill: var(--grey);
      stroke: var(--grey);
    }
    .results-star-active {
      fill: var(--colour3);
      stroke: var(--black);
      stroke-width: 2px;
    }
/* =====================================================
   8. QUIZ
===================================================== */
.unit-quiz, .quiz-question {width:100%}
.quiz { display: flex; flex-wrap: wrap; justify-content: center; position: relative;}
.quiz-content { background: var(--white); border-radius: 20px; overflow: hidden; border: 4px solid #e5e7eb; }
.quiz-question {
  width: 100%;
}
.quiz-speak,
.quiz-stimulus,
.quiz-choices,
.quiz-nav {
  padding: 12px 20px;
}
.quiz-speak {
  background: var(--colour1-light);
  border-radius: 6px;
  position: relative;
  color: var(--black);
  margin: 12px;
}
.quiz-title {
  font-weight: bold;
}
.quiz-speak:after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  z-index: 1;
  border-style: solid;
  border-width: 0 0 12px 12px;
  border-color: transparent transparent var(--colour1-light) transparent;
  top: 64%;
  left: -12px;
}
.quiz-stimulus {
  position: relative;
}
.quiz-stimulus svg {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  padding: 3px;
  background: var(--white);
  max-width: 100vw;
  height: auto;
  max-height: 50vh;
}
.quiz-choices {
  text-align: center;
  border-top: 1px solid var(--grey);
}
button.choice,
button.tag,
button.choice:hover,
button.tag:hover {
  padding: 6px 20px;
  border-radius: 60px;
  text-align: left;
  display: inline-block;
  text-align: center;
  font-family: monospace;
  background: var(--grey);
  color: var(--black);
  border: 2px dashed transparent;
  margin: 3px;
}
.unanswered button.choice,
.unanswered button.tag {
  cursor: pointer;
  background: var(--colour1);
  color: var(--dull-white);
}
.unanswered button.choice:hover,
button.quiz-selected-choice,
.unanswered button.quiz-selected-choice,
.unanswered button.quiz-selected-choice:hover,
.unanswered button.quiz-selected-tag,
.unanswered button.quiz-selected-tag:hover,
.unanswered button.tag,
.unanswered button.tag:hover {
  background: var(--colour1-dark);
  color: var(--dull-white);
  border: 2px dashed var(--dull-white);
}
.svg-choice-area {
  opacity: 0.01;
}
.choice .svg-pin-circle,
.choice .svg-pin-line {
  fill: var(--colour1);
  stroke: var(--colour1);
}
.quiz-selected-choice .svg-pin-circle,
.quiz-selected-choice .svg-pin-line {
  fill: var(--colour1-dark);
  stroke: var(--colour1-dark);
}
.quiz-correct .svg-pin-circle,
.quiz-correct .svg-pin-line,
.active .svg-pin-circle,
.active .svg-pin-line {
  fill: var(--colour2);
  stroke: var(--colour2);
  stroke-dasharray: 0;
}
.quiz-incorrect .svg-pin-circle,
.quiz-incorrect .svg-pin-line {
  fill: var(--colour5);
  stroke: var(--colour5);
}
.quiz-correct,
.quiz-correct:hover {
  background: var(--colour2) !important;
  color: var(--white);
  cursor: default;
}
.quiz-incorrect,
.quiz-incorrect:hover {
  background: var(--colour5) !important;
  color: var(--white);
  cursor: default;
}
.quiz-missed,
.quiz-missed:hover {
  background: var(--colour2-dark) !important;
  cursor: default;
}
.quiz-svg-area-selected .quiz-selected-choice {
  fill: var(--colour1);
  opacity: 0.5;
  stroke: none;
  stroke-width: 0;
}
.quiz-svg-area-selected .quiz-correct {
  fill: var(--colour2);
  opacity: 0.5;
}
.quiz-svg-area-selected .quiz-incorrect {
  fill: var(--colour5);
  opacity: 0.3;
}
.quiz-svg-area-selected .quiz-missed {
  fill: var(--colour2-dark);
  opacity: 0.3;
}
.quiz-emoji {
  display: flex;
  border-radius: 60px;
  border: 2px dashed var(--dull-white);
  justify-content: space-between;
  background: linear-gradient(
    90deg,
    var(--colour1) 0%,
    var(--colour2) 100%
  );
}
.emoji {  
  transition: all 0.3s;
}
.quiz-emoji .emoji:hover, .quiz-emoji .emoji:active {transform:scale(1.5);
fill:var(--colour1dark);
border-radius:50%;}
.key-feature {
  border-radius: 6px;
  border: 2px solid var(--grey);
  position: relative;
  text-align: center;
  margin: 6px;
}
.mini-tabs-index {
  display: flex;
}
.mini-tab-index {
  padding: 3px 20px;
  border-right: 1px solid var(--grey);
  cursor: pointer;
}
.mini-tab-index:hover {
  background: var(--colour1);
  color: var(--white);
}
.quiz-nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}
.quiz-stimulus .starred {
  width: 30px;
  opacity: 1;
  position: absolute;
  bottom: 6px;
  left: 6px;
  border: 1px solid var(--grey);
  fill: var(--grey);
}
.quiz-emoji .emoji {
  width: 45px;
  height: 45px;
  fill: var(--dull-white);
}
.quiz-confidence {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.quiz-timer {
  width: 70%;
  margin: 0 auto;
  border-radius: 0 0 60px 60px;
  border: 2px solid var(--grey);
  border-top: none;
  overflow: hidden;
  display: flex;
  position: relative;
  justify-content: center;
}

progress {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  margin-left: 0;
  height: 14px;
}
progress::-webkit-progress-value {
  -webkit-appearance: none;
  background: var(--colour1-light);
  white-space: pre;
  box-shadow: 0 2px 5px var(--stark) inset;
  border-radius:0 0 99px 99px;
}
progress::-webkit-progress-bar {
  -webkit-appearance: none;
  white-space: pre;
  background: var(--stark);
}
.quiz-timerLabel {
  position: absolute;
  bottom: 0;
  font-size: 0.8em;
}
.warning-orange progress::-webkit-progress-value {
  background: var(--colour4);
}
.warning-red progress::-webkit-progress-value {
  background: var(--colour5);
}
.quiz-footer {
  padding: 0 20px;
  justify-content: center;
  width: 100%;
  display: flex;
}
.quiz-bar {
  background: var(--grey);
  border-radius: 3px 3px 60px 60px;
  overflow: hidden;
  border: 2px solid var(--grey);
  border-top: none;
  display: flex;
  align-items: center;
  fill: white;
}
.quiz-bar svg {
  padding: 3px 15px;
  height: 26px;
  width: 26px;
  display: inline-block;
  box-sizing: content-box;
}
.quiz-av-confidence svg,
.quiz-speed svg {
  padding: 0 6px;
  fill: var(--half-black);
}
.quiz-quit-btn,
.quiz-fullscreen-btn {
  position: absolute;
  top: -16px;
  right: 20px;
  z-index: 9;
  border: 2px solid var(--grey);
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.4em;
  padding: 6px 12px;
  height: 40px;
  line-height: 1em;
  color: var(--half-black);
  fill: var(--half-black);
}
.sr-only {
  display: none;
}
.quiz-fullscreen-btn {
  right: 80px;
}
.quiz-quit:hover {
  background: var(--colour5);
  color: white;
}
.quiz-scoring {
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0.3;
}
.quiz-progress,
.quiz-av-confidence {
  display: flex;
  margin: 0 12px;
  border-radius: 3px;
  overflow: hidden;
}
.quiz-progress {
  height: 20px;
}
.quiz-progress-bar {
  height: 20px;
  width: 7px;
  background: var(--white);
  display: inline-block;
}
.quiz-progress-bar-active {
  background: var(--black);
}
.quiz-streak,
.quiz-points {
  font-family: "Bangers", sans-serif;
  font-size: 1.1em;
}
.quiz-finish {
  width: 100%;
  height: 100%;
  font-size: 1.5em;
  text-align: center;
  padding: 30px;
  border: 2px solid var(--colour1);
  border-radius: 20px;
  position: relative;
  background: var(--white);
  background: linear-gradient(to bottom, var(--colour1-light), white);
  text-align: center;
  animation: fadeIn 1s ease-in;
}
.quiz-finish svg {
  width: 50px;
}
.quiz-summary-points {
  font-size: 3em;
}
.card-stat {
  border: 2px solid var(--colour2-dark);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0.5rem;
  background: var(--colour2-light);
  transform: scale(0.9);
  opacity: 0;
  animation: cardAppear 0.6s ease-out forwards;
}
.card-stat:nth-child(1) {
  animation-delay: 0.3s;
}
.card-stat:nth-child(2) {
  animation-delay: 0.5s;
}
.card-stat:nth-child(3) {
  animation-delay: 0.7s;
}

/* Confidence Bar */
.confidence-bar {
  border: 2px solid var(--colour3);
  border-radius: 10px;
  height: 16px;
  position: relative;
  overflow: hidden;
  background: white;
}
.confidence-bar span {
  display: block;
  height: 100%;
  background: var(--colour3);
  width: 0;
  animation: barFill 1.5s forwards;
}

.fullscreen {
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
  align-content: flex-start;
  background: var(--white);
  padding: 12px;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* above everything */
}
.fullscreen .quiz-content {
  min-height: 80vh;
}

/* =====================================================
   Quiz Animations
   ===================================================== */

/* Fade in animation */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeSlideIn 0.5s forwards ease-out;
}

/* Flash for points increment */
.anim-flash {
  animation: flash 0.8s ease-out;
}

/* Timer warnings */
.warning-orange .quiz-timerBar::-webkit-progress-value {
  background: orange;
}
.warning-red .quiz-timerBar::-webkit-progress-value {
  background: red;
}

/* XP shield pop + shine */
#xpShield.pop {
  animation: pop 0.6s ease-out;
}
#xpShield.shine {
  animation: shine 1.5s linear;
}

/* Correct/incorrect feedback styling */
.quiz-correct {
  border: 2px solid var(--colour2, #43A047);
  background: rgba(67, 160, 71, 0.15);
}
.quiz-incorrect {
  border: 2px solid var(--colour4, #f26430);
  background: rgba(242, 100, 48, 0.15);
}
.quiz-missed {
  border: 2px dashed var(--colour3, goldenrod);
  background: rgba(255, 215, 0, 0.15);
}

/* Confetti effect */
@keyframes confettiFall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti {
  position: fixed;
  top: -10px;
  width: 8px;
  height: 14px;
  background-color: var(--colour1, #2A97C6);
  animation: confettiFall 3s linear forwards;
  z-index: 9999;
}
/* =====================================================
   9. GLOSSARY
===================================================== */
.glossary {
  margin: 2rem auto;
  padding: 1rem 2rem;
  background: var(--light-grey);
  border: 2px solid var(--colour1-light);
  border-radius: 12px;
}
#triage-form {column-count:1}
.glossary li { padding-top: 20px; font-size: 1.2rem; font-weight: 900; }
.glossary dt { font-weight: bold; margin-top: 1rem; font-size: 1rem; }
.glossary dd { margin: 0 0 1rem 1.5rem; line-height: 1.4; font-weight: 400;  font-size: 0.9rem; }

/* =====================================================
   10. FEEDBACK
===================================================== */
.rating label {
  cursor: pointer;
  color: #ccc; /* default grey */
  transition: color 0.2s ease;
}

/* Hover effect */
.rating label:hover,
.rating label:hover ~ label {
  color: gold;
}

/* Selected effect (when input is checked) */
.rating input:checked ~ label {
  background: gold;
}
/* =====================================================
   11. ALTERNATE VIEWS
===================================================== */

.chapter-index {
  display: none;
  width: 320px;
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 1rem;   /* distance from top of viewport */
  align-self: flex-start; /* works well in flex/grid layouts */
  max-height: calc(100vh - 2rem); /* prevent overflow */
  overflow-y: auto; /* scroll inner contents if too tall */
}
#tabs-nav {display:none !important}
#unit-container[data-view="chapter"], #unit-container[data-view="tabs"], #unit-container[data-view="accordion"] {
  
  display: flex;
  .slider-track {
    display: block;
    transform: translateX(0%) !important;
    width: 100%;
  }
  .unit {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20px;
    margin: 20px;
  }
  .unit-header, .appendix-header, .appendix-content, .subunits {
    width: 100%;
  }
  .unit-content,
  .unit-svg, .unit-quiz {
    max-height: inherit;
    width: 50%;
    padding: 2rem;
  }
  .chapter-index {
    display: block;
  }
.skill-header {display:none}
  /* Index list */
  .chapter-index ul {
    list-style: none;  
    padding-left: 2.8rem
  }
  .chapter-index li {
    margin: 0.25rem 3rem 0.25rem 0;
  }
  .chapter-index a {
    text-decoration: none;
    color: var(--black);
    font-weight: 600;
    display:flex;
    align-items: center;    
    min-height: 40px;
    padding-left: 30px;

  }
  .chapter-index a:hover {
    text-decoration: underline;
  }
  .chapter-index ul ul {
    padding-left: 1rem;
    border-left: 2px solid var(--colour1-light);
  }
}
/* 2. Slider View */

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.slider-nav {
  display: none;
  justify-content: space-between;
  margin-top: 1rem;
}

.slider-nav button {
  border: 2px solid var(--colour1-dark);
  padding: 0.5rem 1rem;
  background: white;
  cursor: pointer;
  border-radius: 6px;
}
#unit-container[data-view="slider"] {
  position: relative;
  overflow: hidden;
  .subunits, .appendix, .appendix-content, .results, .unit-footer, .unit-header::after {display:none;}
  .unit {background:inherit}
.slider-track {
  max-height:80vh;
}
.unit-header {
  background:var(--black);
}
.unit-header h2, .unit-header h3 {
  color:var(--white);
}
  .unit-svg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 2rem;
    max-height: 60vh;
  }
  .unit-svg >  svg {
    width: 80%;
  }
  section,
  .unit {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
  }
  .unit-banner {
    position: absolute;
    top: 0;
    left: 0;    
    height: 90vh;
    z-index: -1;
  }
  .slider-nav {
    display: flex;
  }
}

/* Slide Pagination */
.slider-dots, .slider-progress  {
  display: none;
}
#unit-container[data-view="slider"] .slider-dots {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}
#unit-container[data-view="slider"] .slider-progress {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8em;
}
.slider-dots button {
  width: 12px;
  height: 12px;
  margin: 3px;
  border-radius: 50%;
  border: 2px solid var(--colour1-dark);
  background: white;
  cursor: pointer;
  transition: background 0.3s;
}
.slider-dots button.active {
  background: var(--colour1-dark);
}
.slider-dots button.shaded {
  background:var(--colour1);
}
/* 3. Accordion */
#unit-container[data-view="accordion"] {
  .unit-header::after,
.appendix-header::after {
  content: "";
  flex-shrink: 0;
  width: 42px;
  height: 30px;
  margin-left: auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='grey' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M6.646 12.354a.5.5 0 0 1-.708-.708L9.293 8 5.938 4.354a.5.5 0 1 1 .708-.708l3.75 4a.5.5 0 0 1 0 .708l-3.75 4z'/></svg>")
    no-repeat center;
  background-size: contain;
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}
.final-challenge .unit-header::after,
.appendix-header::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M6.646 12.354a.5.5 0 0 1-.708-.708L9.293 8 5.938 4.354a.5.5 0 1 1 .708-.708l3.75 4a.5.5 0 0 1 0 .708l-3.75 4z'/></svg>")
    no-repeat center;
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-left: auto;
  background-size: contain;
  transition: transform 0.3s ease;
  transform: rotate(90deg);
}
.open > .unit-header::after,
.open > .appendix-header::after {
  transform: rotate(270deg);
}
  .slider-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-left: none;
  }
  section {width:100% !important;}

  .unit {overflow:hidden;
    margin: 6px;}
  #chapterAccordion, .unit-banner,
  .unit-content,
  .unit-svg,
  .unit-footer,
  .appendix-content, #triage-form, .subunits {
    display: none;
  }

  section.open {
    .unit-banner,
    .unit-content,
    .unit-svg,
    .appendix-content,#triage-form, .subunits {
      display: block;
    }
    .unit-footer {
      display:flex;
    }
    .subunits {
      
    max-width: 1150px;
    margin: 0 auto;
    }
    .subunits .unit-header {
      display:flex;
      min-height: 55px;
    }
    .subunits {
      .unit-banner,
    .unit-content,
    .unit-svg,
    .unit-footer {display:none;}
    }
  
  .subunits > .open {
    .unit-banner,
    .unit-content,
    .unit-svg {
      display:block;
    }
    .unit-footer {
      display:flex
    }
  }}
  .unit-header {
    cursor: pointer;
  }
  
.unit-header:hover {
  background: var(--light-grey);
}
.appendix-header:hover,
.final-challenge .unit-header:hover {
  background: var(--colour1-dark);
  color: var(--white);
}
}
/* 4. Tabs */
#unit-container[data-view="tabs"], #unit-container[data-view="chapter"] {
.accordion-item {
  padding:0;
  border:0;
  background:inherit;
  position: relative;

}
.accordion-header {
  padding:0;
}
.accordion-button {
  background:inherit;
  padding: 0 12px 0 0;
}
  
.accordion-button:not(.collapsed){
  
  background: var(--colour1-light);
  border-radius: 0 20px 20px 0;
}
.accordion-button:not(.collapsed) a {
  color:var(--colour1);
}
.accordion-button:not(.collapsed) svg {
  stroke:var(--colour1);
}
.menu-item:first-child a {  
  font-weight: 900;
}
#chapterAccordion {min-width:350px;
  padding: 20px 12px 0 0;display:block;background:inherit}
.skill-header {display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 3px 12px;
  color: var(--half-black);
  background: var(--grey)}
section.unit.open {  
  display: flex;
  .unit-banner,
  .unit-content,
  .unit-svg,
  .appendix-content,#triage-form, .subunits {
    display: block;
  }

  .unit-footer {
    display:flex;
  }
  .subunits {
    
  max-width: 1150px;
  margin: 0 auto;
  }
  .subunits .unit-header {
    display:flex;
    min-height: 55px;
  }

  .unit-footer {
    display:flex
  }
}}

#unit-container[data-view="tabs"]{
  
#tabs-nav {display:flex !important;}
  section.unit {display:none;}
  section.open-parent {
    display:block;
    .unit-banner, .unit-header {
      display:block
    }
    .unit-svg, .unit-content, .unit-footer {
      display:none;
    }
  }
  .subunits {
    .unit-banner,
  .unit-content,
  .unit-svg,
  .unit-footer {display:none;}
  }
  
.subunits > .open {
  .unit-banner,
  .unit-content,
  .unit-svg, .unit-footer {
    display:block;
  }
}
}
/* =====================================================
   12. ANIMATIONS
===================================================== */
@keyframes barFill { from { width: 0; } }

@keyframes cardAppear {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dash { to { stroke-dashoffset: 2; } }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeSlideIn { to { opacity: 1; transform: translateY(0); } }

@keyframes flash {
  0% { color: var(--white); transform: scale(1); }
  30% { color: var(--colour2, #43A047); transform: scale(1.3); }
  60% { color: var(--colour1, #2A97C6); transform: scale(0.9); }
  100% { color: var(--white); transform: scale(1); }
}

@keyframes linearwipe {
  0% { clip-path: polygon(0 -5%, 1% -5%, 1% 105%, 0 105%); }
  100% { clip-path: polygon(0 -5%, 100% -5%, 100% 105%, 0 105%); }
}

@keyframes pop {
  0% { transform: scale(0.6) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes shine {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

@keyframes streakPulse {
  from { opacity: 0.6; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}

@keyframes xp-glow {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.15) saturate(1.2); }
}

.anim-pulse {
  animation: pulse 1s linear infinite alternate;
}
.anim-wipe-trace {
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation-name: linearwipe;
  animation-duration: 2.5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.anim-wipe-rhythm {
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation-name: linearwipe;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.chaser {
  stroke-dasharray: 1;
  animation: dash 1s linear infinite;
  stroke: var(--white);
  stroke-width: 0.5px;
  fill: var(--colour1);
}
.fade {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.fade-in {
  opacity: 1;
}

/* =====================================================
   13. SVG
===================================================== */
/*---------------------- SHAPES --------------*/
.svg-path,
.svg-trace,
.svg-axis,
.svg-pin line,
.svg-arrow,
.svg-arrow-thick,
.svg-outline,
.svg-point {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svg-path0,
.svg-silhouette,
.svg-skin { fill: var(--black); }
.svg-trace,
.svg-axis { stroke: var(--black); stroke-width: var(--stroke-medium); }
.svg-large .svg-trace { stroke-width: var(--stroke-thick); }
.svg-heart { fill: var(--colour5); }
.svg-electrode {
  fill: var(--colour5);
  stroke: var(--colour6);
  stroke-width: var(--stroke-medium);
}
.svg-electrode.active,
.svg-pin.active {
  fill: var(--colour2);
  stroke: var(--colour2);
}
.svg-pin { cursor: pointer; }
.svg-pin circle {
  fill: var(--colour6);
  stroke: var(--black) !important;
  stroke-width: 0.5px;
  stroke-dasharray: 0.4;
}
.svg-pin line { stroke: var(--colour6); stroke-width: 0.8; }
.svg-highlight { fill: var(--colour3-light); }
.svg-skin {
  fill-opacity: var(--opacity-skin);
  stroke: var(--black);
  stroke-width: var(--stroke-thin);
}
.svg-bone {
  fill: var(--white);
  stroke: var(--black);
  stroke-width: 0.163384;
  fill-rule: evenodd;
}
.svg-arrow { stroke: var(--colour5); stroke-width: var(--stroke-arrow); }
.svg-arrow-polygon {
  fill: var(--colour5);
  stroke: var(--colour5);
  stroke-width: var(--stroke-arrow);
  transform-origin: 50% 50%;
}
.svg-arrow-thick { stroke: var(--colour5); stroke-width: var(--stroke-heavy); }
.svg-pin-selected { stroke: var(--colour4); fill: var(--colour5); }
.svg-pin-selected line { stroke: var(--colour4); }

/*---------------------- GRID --------------*/
.svg-grid { opacity: 0.5; stroke: none; }
.svg-grid-large { stroke-width: var(--stroke-medium); }
.svg-grid-small { stroke-width: var(--stroke-thin); }
.svg-grid path,
.svg-grid-small,
.svg-grid-large { stroke: var(--colour1); fill: none; }


/*---------------------- PAINT MENU --------------*/
#svg-paint .color-field { height: 40px; width: 40px; margin: 0 3px; }

/*---------------------- NODE EDITING --------------*/
.svg-handle {
  fill: var(--colour1);
  stroke: var(--white);
  stroke-width: var(--stroke-thin);
}
.svg-handle-line {
  stroke: var(--colour4);
  stroke-width: var(--stroke-thin);
  stroke-dasharray: 0.3;
}
.svg-point { stroke: var(--colour6); stroke-width: var(--stroke-thick); }

/*---------------------- TEXT --------------*/
.svg-text {
  fill: var(--colour1-dark);
  font: 700 var(--font-xs) monospace;
}
.svg-large .svg-text { font-size: var(--font-sm); }
.svg-balloon {
  fill: var(--white);
  stroke: var(--black);
  font: 700 var(--font-sm) "Bangers", monospace;
  stroke-width: 0.1;
}
.svg-large .svg-balloon { font-size: var(--font-md); stroke-width: var(--stroke-medium); }
.svg-label {
  fill: var(--black);
  stroke: var(--black);
  font: var(--font-xs) sans-serif;
  stroke-width: var(--stroke-thin);
}
.svg-large .svg-label { font-size: var(--font-sm); }

/*---------------------- CAPTION --------------*/
.caption {
  font: var(--font-caption) monospace;
  text-align: center;
  border: 2px solid var(--colour2-dark);
  border-left-style: dashed;
  border-right-style: dashed;
  background: var(--colour2-light);
  padding: 0.55rem 1rem;
  margin-top: 0.75rem;
  gap: 0.5rem;
  border-radius: var(--badge-radius);
}
.switch-target { display: none; }
.switch-default { display: block; }
.switch,
.toggle-opacity { cursor: pointer; transition: all 1s ease; }
.switch-half { opacity: var(--opacity-caption-switch); display: block; }
.opacity-half { opacity: var(--opacity-caption-switch); }
.toggle-opacity-selected { opacity: var(--opacity-toggle-selected); }
.caption .switch {
  text-decoration: underline 2px dotted;
  color: var(--colour1);
  min-width: 12px;
  display: inline-block;
  user-select: none;
}
.caption .active {
  color: var(--colour5);
  text-decoration: underline 2px solid;
}

/*---------------------- FILLS & STROKES --------------*/
.svg-fill-dark { fill: var(--black); }
.svg-fill-light { fill: var(--white); }
.svg-fill1 { fill: var(--colour1); }
.svg-fill2 { fill: var(--colour2); }
.svg-fill3 { fill: var(--colour3); }
.svg-fill4 { fill: var(--colour4); }
.svg-fill5 { fill: var(--colour5); }
.svg-fill6 { fill: var(--colour6); }
.svg-fill7 { fill: var(--white); }
.svg-fill8 { fill: var(--black); }

.svg-stroke1 { stroke: var(--colour1); }
.svg-stroke2 { stroke: var(--colour2); }
.svg-stroke3 { stroke: var(--colour3); }
.svg-stroke4 { stroke: var(--colour4); }
.svg-stroke5 { stroke: var(--colour5); }
.svg-stroke6 { stroke: var(--colour6); }
.svg-stroke7 { stroke: var(--white); }
.svg-stroke8 { stroke: var(--black); }
.svg-opacity5 {opacity:0.5}

.svg-fill {
  fill: var(--colour5);
  opacity: 0.01;
  cursor: pointer;
  transition: all 1s ease;
}
.svg-fill:hover { opacity: 0.6; }
.svg-choice-area,
.transparent { fill: var(--light-white); opacity: 0.001; }
.svg-defib .svg-trace { stroke: #83a05c; }

.triage1 {
  background: var(--colour5) !important;
}
.triage2 {
  background: var(--colour4) !important;
}
.triage3 {
  background: var(--colour3) !important;
}
.triage4 {
  background: var(--colour2) !important;
}
.triage5 {
  background: var(--colour1) !important;
}

/* =====================================================
   14. MEDIA QUERIES
===================================================== */
@media only screen and (max-width: 1200px) {
  .glossary, .bugs { column-count: 2; }
  #unit-container, .unit, .appendix {display:block !important}
  #unit-container[data-view="accordion"]
section.open
.subunits
.unit {
     width: 100% !important;
}
  #chapterAccordion{display:none !important}
  .unit-content, .unit-svg, .unit-quiz {
    width:100% !important;
  }
  .unit {border:none !important;
    border-top:2px solid var(--grey) !important; margin:0 !important;
  border-radius:0 !important;}
}
@media only screen and (max-width: 600px) {
  .glossary, .bugs { column-count: 1; }
}