/* Teach Me Space — lesson kit (lab bench) and mission kit.
   Lessons keep their own class names; this file gives them the poster look.
   Variables below replace the purple ones each lesson used to define in :root. */

.lessonWrap{
  --bg0: var(--cream); --bg1: var(--paper); --card: var(--paper); --card2: var(--paper);
  --line: rgba(29,42,77,.18); --line2: rgba(29,42,77,.12);
  --text: var(--navy); --muted: #5a6485; --muted2: #5a6485;
  --good: var(--teal-deep); --warn: #8a5a00; --bad: var(--tomato-deep);
  --accent: var(--tomato-deep); --glow: transparent;
  padding-top:28px; padding-bottom:8px; /* sides come from .wrap */
}
.screen{
  --bg0: var(--navy-deep); --bg1: var(--navy-2); --card: var(--navy-2); --card2: var(--navy-2);
  --line: rgba(244,234,213,.18); --line2: rgba(244,234,213,.12);
  --text: var(--cream); --muted: rgba(244,234,213,.78); --muted2: rgba(244,234,213,.66);
  --good: #6fd3c2; --warn: var(--mustard); --bad: var(--tomato-bright); --accent: var(--mustard);
}

/* ----- Lesson head ----- */
.lessonCrumb{color:var(--muted); font-size:14px; font-weight:700}
.lessonCrumb a{color:var(--navy)}
.heroTop{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px}
.heroLeft{max-width:780px}
.heroLeft h1{margin:6px 0 10px; font-size:clamp(40px, 5.5vw, 58px)}
.heroSub{max-width:62ch; margin:0 0 12px; color:var(--muted); font-size:17px; line-height:1.55}
.heroPills{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:2px solid var(--navy); border-radius:999px; background:var(--paper); color:var(--navy); font-size:13px; font-weight:700; user-select:none}
.chipDot{width:9px; height:9px; border-radius:50%; background:var(--sky); box-shadow:none}
.chipDot.good{background:var(--teal-deep)}
.chipDot.warn{background:var(--mustard)}

/* ----- Bench layout ----- */
/* padding:0 — lessons use <section class="labShell|panelCard">, which would get styles.css section padding */
.labShell{display:grid; grid-template-columns:1.55fr 1fr; align-items:start; gap:20px; margin-top:18px; padding:0}
.panelCard{padding:0; overflow:hidden; border:2px solid var(--navy); border-radius:var(--r-lg); background:var(--paper); color:var(--navy); box-shadow:var(--shadow)}
.panelHeader{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 12px; border-bottom:2px solid var(--navy); background:transparent}
.panelHeader h2{margin:0; font-size:19px; letter-spacing:-.02em}
.panelHeader small{color:var(--muted); font-size:13px}
.labShell ~ .panelCard,.practiceSection{margin-top:24px}

/* The simulation's panel is the navy "screen" */
.panelCard.screen{border-color:var(--navy); border-radius:22px; background:var(--navy); color:var(--cream); box-shadow:none}
.panelCard.screen .panelHeader{border-bottom-color:rgba(244,234,213,.14)}
.panelCard.screen .panelHeader h2{color:var(--cream)}

/* Side column: cards float on the page instead of sitting in one big box */
.labShell > .panelCard:not(.screen){overflow:visible; border:0; background:transparent; box-shadow:none}
.labShell > .panelCard:not(.screen) > .panelHeader{padding:0 0 10px; border:0}
.labShell > .panelCard:not(.screen) > .panelHeader h2{color:var(--muted); font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.labShell > .panelCard:not(.screen) > .infoBody{padding:0}

.canvasWrap{padding:12px}
.canvasBox{position:relative; overflow:hidden; border:0; border-radius:14px; background:var(--navy-deep); box-shadow:none}
.lessonWrap canvas{display:block; width:100%; height:auto}
.hudTip{--text:var(--navy); --muted:#5a6485; /* light card inside the navy .screen */
  position:absolute; left:12px; bottom:12px; max-width:520px; padding:10px 12px; border:0; border-radius:12px; background:var(--cream); color:var(--navy); font-size:13px; line-height:1.4; box-shadow:none; pointer-events:none}
.hudRow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; color:var(--muted); font-size:12px}
.kbd{display:inline-block; padding:1px 7px; border:1.5px solid var(--navy); border-radius:6px; background:var(--paper); color:var(--navy); font:500 12px var(--mono)}

/* ----- Controls ----- */
.controls{padding:14px 16px 16px; border-top:2px solid var(--line2); background:transparent}
.row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:12px}
.row:first-child{margin-top:0}
.group{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.label{color:var(--muted); font-size:13px; font-weight:700}
.value{color:var(--text); font:500 14px var(--mono)}
.sliderWrap{display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%}
/* The 260px basis is a WIDTH: these sit in .row, which is a horizontal flex container. In a
   vertical one it becomes a height and the slider grows to 260px tall, so any column layout
   must reset the flex — see .dialRow in the natural-selection lesson. */
.lessonWrap input[type="range"]{flex:1 1 260px; min-width:180px; height:44px; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; accent-color:var(--mustard)}
.lessonWrap input[type="range"]::-webkit-slider-runnable-track{height:8px; border:2px solid var(--navy); border-radius:99px; background:var(--navy)}
.lessonWrap input[type="range"]::-webkit-slider-thumb{width:22px; height:22px; margin-top:-9px; border:2px solid var(--navy); border-radius:50%; background:var(--mustard); -webkit-appearance:none}
.lessonWrap input[type="range"]::-moz-range-track{height:8px; border-radius:99px; background:var(--navy)}
.lessonWrap input[type="range"]::-moz-range-thumb{width:20px; height:20px; border:2px solid var(--navy); border-radius:50%; background:var(--mustard)}
.screen input[type="range"]::-webkit-slider-runnable-track{border-color:rgba(244,234,213,.5); background:var(--navy-deep)}
/* 44px, not 40: that is the tap-target floor every audit on this site holds buttons to, and
   a dropdown is just as much a control as a button. Seven lessons use one and every single
   one of them was 4px under, because no harness had ever measured a select. */
.lessonWrap input[type="number"],.lessonWrap select{min-height:44px; padding:8px 10px; border:2px solid var(--navy); border-radius:10px; background:var(--paper); color:var(--navy); font:500 14px var(--mono)}
.screen input[type="number"],.screen select{border-color:rgba(244,234,213,.5); background:var(--navy-deep); color:var(--cream)}

.miniBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  /* 44px, the same floor this file already sets for selects and number inputs a few rules down.
     It was 40 here, which meant the one control on every lesson that gets tapped most - New
     challenge, Hint, the practice answers - was the one under the tap-target size. */
  min-height:44px; padding:8px 14px;
  border:2px solid var(--navy); border-radius:999px;
  background:var(--paper); color:var(--navy);
  font:700 14px var(--font); white-space:nowrap; cursor:pointer; user-select:none;
  box-shadow:2px 2px 0 var(--navy);
  transition:transform var(--t), box-shadow var(--t);
}
.miniBtn:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--navy)}
.miniBtn:active{transform:translate(1px,1px); box-shadow:none}
.miniBtn.primary{background:var(--mustard)}
.miniBtn.on,.miniBtn[aria-pressed="true"]{background:var(--navy); color:var(--cream)}
.miniBtn.accent{background:var(--sky-light)}
.miniBtn.accent.on{background:var(--teal-deep); color:var(--cream)}
.screen .miniBtn{border-color:rgba(244,234,213,.55); background:transparent; color:var(--cream); box-shadow:none}
.screen .miniBtn:hover{border-color:var(--cream)}
.screen .miniBtn.primary{border-color:var(--mustard); background:var(--mustard); color:var(--navy)}
.screen .miniBtn.on,.screen .miniBtn[aria-pressed="true"]{border-color:var(--cream); background:var(--cream); color:var(--navy)}
.screen .miniBtn.accent{border-color:var(--sky-light); color:var(--sky-light)}
.screen .miniBtn.accent.on{background:var(--sky-light); color:var(--navy)}

/* ----- Readout + "What you're learning" ----- */
.infoBody{display:flex; flex-direction:column; gap:14px; padding:16px}
.infoTile{padding:14px 16px; border:2px solid var(--navy); border-radius:var(--r-md); background:var(--paper); box-shadow:var(--shadow)}
.infoTile h3{margin:0 0 8px; color:var(--navy); font-size:16px}
.infoTile.learn{background:var(--mustard)}
.infoTile.learn .note,.infoTile.learn p{color:var(--navy)}
.kv{display:grid; grid-template-columns:1fr auto; color:var(--muted); font-size:14px}
.kv > *{padding:6px 0; border-bottom:1.5px dashed var(--line)}
.kv > :nth-last-child(-n+2){border-bottom:0}
.kv b{color:var(--navy); font:500 14px var(--mono); text-align:right}
.note{color:var(--muted); font-size:14px; line-height:1.55}
.note code{padding:1px 6px; border:1.5px solid var(--line); border-radius:6px; background:var(--cream); color:var(--navy); font:500 12px var(--mono)}
.subGrid{display:grid; gap:12px}
.plotBox{overflow:hidden; border:2px solid var(--navy); border-radius:12px; background:var(--navy-deep)}
.plotCanvas{display:block; width:100%; height:auto}

/* ----- Practice / quiz ----- */
/* Question on top, answers full width below (the lab-bench mockup).
   A practice area with its own drawing keeps drawing and answers side by side. */
.practiceBody{display:grid; grid-template-columns:1fr; align-items:start; gap:16px; padding:16px}
.practiceBody:has(canvas){grid-template-columns:1fr 1fr}
.challengeCard,.questionBox{padding:16px; border:2px solid var(--navy); border-radius:var(--r-md); background:var(--paper)}
.challengeTop{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.scorePills,.quizStats{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.statChip{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:2px solid var(--navy); border-radius:999px; background:var(--paper); font-size:13px; font-weight:700}
.statChip b,.quizTimer{font-family:var(--mono); font-weight:500}
#qText,.questionText{color:var(--navy); font-size:20px; font-weight:800; line-height:1.3; letter-spacing:-.01em}
.practiceBtns,#choicesGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.practiceBtns .miniBtn,.choiceBtn{
  display:block; width:100%; min-height:52px; padding:12px 16px;
  border:2px solid var(--navy); border-radius:var(--r-md);
  background:var(--paper); color:var(--navy);
  font:600 15px/1.4 var(--font); text-align:left; white-space:normal;
  box-shadow:3px 3px 0 var(--navy); cursor:pointer;
  transition:transform var(--t), box-shadow var(--t);
}
.practiceBtns .miniBtn:hover,.choiceBtn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--navy)}
/* 'right' alongside 'correct' and 'good', the way 'wrong' already sits alongside 'bad'.
   Five lessons' scripts add .right to the chosen answer and it was styled nowhere, so a
   wrong answer went red and a right one stayed plain white - the one moment in the practice
   where the page most needs to say something. */
.choiceBtn.correct,.practiceBtns .miniBtn.correct,.practiceBtns .miniBtn.good,
.choiceBtn.right,.practiceBtns .miniBtn.right{background:var(--teal-deep); color:var(--cream)}
.choiceBtn.wrong,.practiceBtns .miniBtn.wrong,.practiceBtns .miniBtn.bad{background:var(--tomato-deep); color:var(--cream)}
.choiceBtn.dimmed{opacity:.55}
.feedback{min-height:20px; margin-top:12px; color:var(--muted); font-size:15px; line-height:1.5}
.feedback.good{color:var(--teal-deep); font-weight:700}
.feedback.bad{color:var(--tomato-deep); font-weight:700}
#feedbackBox,.feedbackBox{margin-top:12px; padding:12px 16px; border-left:5px solid var(--teal-deep); border-radius:0 12px 12px 0; background:#e6f2ef; color:var(--navy); font-size:15px; line-height:1.5}
#feedbackBox.wrong,.feedbackBox.wrong{border-left-color:var(--tomato-deep); background:#f9e3dc}

/* ----- Phone ----- */
.mobileLessonNotice{display:none; margin-bottom:14px; padding:10px 14px; border:2px solid var(--navy); border-radius:var(--r-md); background:var(--mustard); color:var(--navy); font-size:14px; font-weight:600; text-align:center}
@media (max-width:900px){
  .labShell{grid-template-columns:1fr}
  .practiceBody,.practiceBody:has(canvas){grid-template-columns:1fr}
}
@media (max-width:720px){
  .mobileLessonNotice{display:block}
  .hideOnMobile{display:none}
}
@media (max-width:600px){
  .lessonWrap{padding-top:18px}
  .canvasWrap{padding:8px}
  .hudTip{display:none}
  .practiceBtns,#choicesGrid{grid-template-columns:1fr}
  .controls .miniBtn{padding:8px 10px; font-size:13px}
}