/* Jeeva labs: the layout shared by every study lab, built on the same pieces as the Physics, Chemistry and Maths labs (assets/lab.css):
   breadcrumb, kicker + title + short lead, a row of mode pills, the stage card on the left, the panel on the right, and a drawer on the right edge.
   - the stage card shows the bench; a click on a model (or a topic pill) swaps it for that topic's model
   - the explanations (parts, notes, practice questions, practical steps) are in the panel on the right, and only after a click
   - the calculators and simulations are in the Practicals drawer
   Loaded after the lab's own stylesheet, so these rules win. Scoped to .jv-lab. */
.jv-lab.jv-lab{ padding:0 !important; background:transparent; color:var(--chrome); }

/* the mode pills (topics): beat the old column list of each lab's own stylesheet */
.jv-lab.jv-lab #rail, .jv-lab.jv-lab #jvGroups{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; max-height:none; overflow:visible; }
.jv-lab.jv-lab #jvGroups[hidden]{ display:none; }
.jv-lab #rail .mode-btn{ width:auto; text-align:center; line-height:1.25; }
.jv-lab .modes{ margin:10px 0 0; }
.jv-lab .jv-groups{ margin:12px 0 0; }
.jv-lab .jv-groups + .jv-topics{ margin-top:8px; }
.jv-lab .jv-groups .mode-btn{ font-size:.8125rem; padding:.3em .85em; min-height:30px; background:transparent; }
.jv-lab .jv-groups .mode-btn.active{ background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:var(--chrome); border-color:var(--accent); }
.jv-lab .jv-topics{ margin-bottom:12px; }

/* the grid: stage on the left, explanations on the right (same as the other labs, with a wider panel for the text) */
.jv-lab .lab-grid.jv-grid{ grid-template-columns:minmax(0,1fr) 380px; margin-bottom:10px; }
@media (max-width:1180px){ .jv-lab .lab-grid.jv-grid{ grid-template-columns:minmax(0,1fr) 340px; } }
@media (max-width:880px){ .jv-lab .lab-grid.jv-grid{ grid-template-columns:minmax(0,1fr); } }

.jv-lab .jv-stage{ padding:14px; }
.jv-lab #view, .jv-lab #stView{ height:min(70vh,640px); min-height:380px; border-radius:var(--r-md); border:1px solid var(--edge-hi); }
.jv-lab #stView{ margin:0; }
.jv-lab .bar{ margin-top:12px; }
.jv-lab .bar .row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.jv-lab .lbtn{ font:inherit; font-size:.875rem; padding:.45em .95em; border-radius:var(--r-sm); border:1px solid var(--edge-hi); background:var(--surface); color:var(--chrome-2); cursor:pointer; }
.jv-lab .lbtn:hover{ color:var(--chrome); border-color:var(--chrome-3); }
.jv-lab .lbtn[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.jv-lab .lbtn[disabled]{ opacity:.4; cursor:default; }

/* the bench and the topic model share the stage card */
.jv-lab .st-stage{ display:none; }
.jv-lab .jv-grid.is-topic .jv-stage > #view, .jv-lab .jv-grid.is-topic .jv-stage > .bar{ display:none; }
.jv-lab .jv-grid.is-topic .jv-stage > .st-stage{ display:block; }
.jv-lab .st-models{ display:flex; flex-wrap:wrap; gap:8px; padding:0 0 12px; }
.jv-lab .st-bar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 0 0; }
.jv-lab .st-bar .grp{ display:flex; align-items:center; gap:8px; }
.jv-lab .st-bar .lab{ font-size:.8125rem; color:var(--chrome-3); }

/* the panel on the right */
.jv-lab .controls.study{ padding:0; display:flex; flex-direction:column; align-self:stretch; overflow-y:auto; background:var(--panel-2); }
.jv-lab .st-empty{ padding:26px 22px; color:var(--chrome-2); }
.jv-lab .st-empty h2{ font-size:1.3rem; margin:2px 0 10px; line-height:1.2; color:var(--chrome); }
.jv-lab .st-empty p{ margin:0 0 10px; line-height:1.6; }
.jv-lab .st-eyebrow{ margin:0 0 4px; font-size:var(--fs-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.jv-lab .st-detail{ display:none; }
.jv-lab .controls.study.open .st-detail{ display:block; }
.jv-lab .controls.study.open .st-empty{ display:none; }
.jv-lab .st-head{ padding:18px 20px 8px; }
.jv-lab .st-head h2{ font-size:1.3rem; line-height:1.2; margin:0; color:var(--chrome); }
.jv-lab .st-steps{ margin:0; padding:12px 20px; border-block:1px solid var(--edge); background:color-mix(in srgb,var(--accent) 7%,transparent); }
.jv-lab .tabs{ margin:0; padding:0 8px; border-bottom:1px solid var(--edge); }
.jv-lab .tabs button{ color:var(--chrome-3); }
.jv-lab .tabs button[aria-selected="true"]{ color:var(--chrome); border-bottom-color:var(--accent); }
.jv-lab .body{ max-height:none; overflow:visible; padding:16px 20px 22px; }
.jv-lab .body p, .jv-lab .nl{ color:var(--chrome-2); }
.jv-lab .fact{ background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:var(--edge-hi); border-left-color:var(--accent); color:var(--chrome); }
.jv-lab .opt{ background:var(--surface); color:var(--chrome); border-color:var(--edge-hi); }
.jv-lab .plist button{ background:var(--surface); color:var(--chrome-2); }

/* the Practicals drawer (same drawer as the Lessons of the other labs) */
.jv-lab .lp-body{ padding-bottom:28px; }
.jv-lab .lp-body .pt{ margin:22px 0 8px; font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-family:var(--l-mono,"IBM Plex Mono",monospace); }
.jv-lab .lp-body .pt:first-of-type{ margin-top:12px; }
.jv-lab .lp-body .pw{ border-top:1px solid var(--edge); padding:10px 0; }
.jv-lab .lp-body .pw > summary{ cursor:pointer; font-weight:600; color:var(--chrome); }
.jv-lab .lp-body .kq{ display:flex; flex-direction:column; gap:4px; margin:10px 0; font-size:.875rem; color:var(--chrome-2); }
.jv-lab .lp-body .kq span{ font-size:.8125rem; color:var(--chrome-3); }
.jv-lab .lp-body .kq select, .jv-lab .lp-body .kq input[type=text]{ font:inherit; color:var(--chrome); background:var(--field); border:1px solid var(--edge-hi); border-radius:var(--r-sm); padding:.45em .6em; min-height:38px; width:100%; }
.jv-lab .lp-body .kq input[type=range]{ width:100%; accent-color:var(--accent); }
.jv-lab .lp-body .fact{ margin:12px 0 0; font-size:.875rem; }
.jv-lab .lp-body .gout, .jv-lab .lp-body p.note{ font-size:.875rem; color:var(--chrome-2); }
.jv-lab .lp-body svg{ max-width:100%; height:auto; }
.jv-lab .lp-body [id$="Chart"]{ margin-top:8px; }

@media (max-width:880px){
  .jv-lab #view, .jv-lab #stView{ height:min(60vh,460px); min-height:320px; }
  .jv-lab .hint{ display:none; }
  .jv-lab .controls.study{ overflow:visible; }
}

@media (max-width:700px){
  .jv-lab.jv-lab #rail, .jv-lab.jv-lab #jvGroups{ flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; }
  .jv-lab.jv-lab #rail::-webkit-scrollbar, .jv-lab.jv-lab #jvGroups::-webkit-scrollbar{ display:none; }
  .jv-lab #rail .mode-btn, .jv-lab #jvGroups .mode-btn{ flex:0 0 auto; white-space:nowrap; }
}

@media (max-width:700px){ .jv-lab .lessons-toggle span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }