/* Shared presentation for every course laboratory and embedded lesson trainer. */
:root{
  --lab-surface:#fffefa;
  --lab-soft:#f3f1e9;
  --lab-line:#deded2;
  --lab-muted:#73766b;
  --lab-accent:#763c40;
  --lab-accent-soft:#f3e8e6;
  --lab-gold:#a48750;
  --lab-shadow:0 12px 38px #3d402508;
}
:root[data-theme=dark]{
  --lab-surface:#292d26;
  --lab-soft:#23271f;
  --lab-line:#43493b;
  --lab-muted:#b3b7a7;
  --lab-accent:#dbaeb0;
  --lab-accent-soft:#3c3030;
  --lab-gold:#c6ab75;
  --lab-shadow:0 12px 38px #00000016;
}
.lab{
  --surface:var(--lab-surface);
  --surface-2:var(--lab-soft);
  --rule:var(--lab-line);
  --rule-soft:var(--lab-line);
  --ink-soft:var(--lab-muted);
  --ink-mute:var(--lab-muted);
  --accent:var(--lab-accent);
  --accent-soft:var(--lab-accent-soft);
  --gold:var(--lab-gold);
  --on-accent:#fff9ef;
  --radius:8px;
  padding:clamp(22px,3.2vw,38px);
  margin:32px 0;
  background:var(--lab-surface);
  border:1px solid var(--lab-line);
  border-radius:18px;
  box-shadow:var(--lab-shadow);
  min-width:0;
  scroll-margin-top:90px;
}
html[data-theme=dark] .lab{--on-accent:#252720;--accent-ink:#e8c2c0}
.lab::before{display:none}
.lab>.labk{
  font:500 10px/1.7 var(--sans);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--lab-muted);
  margin:0 0 20px;
  padding:0 0 17px;
  border-bottom:1px solid var(--lab-line);
  gap:10px;
}
.lab>.labk::before{width:17px;height:17px;background:var(--lab-gold);flex:none}
.lab>.labk::after{display:none}
.lab>h3{font:600 clamp(30px,3.2vw,39px)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 13px}
.lab>p.soft{font:400 14px/1.85 var(--sans);color:var(--lab-muted);margin:0 0 27px;max-width:65ch}
.lab p{overflow-wrap:break-word}
.lab .fig-svg{
  margin:24px 0 18px;
  padding:16px;
  border:1px solid var(--lab-line);
  border-radius:12px;
  background:var(--lab-soft);
  box-shadow:none;
  overflow:auto;
}
.lab .fig-svg::before{display:none}
.lab .fig-svg svg{display:block;max-width:100%;height:auto}
.lab canvas{border-radius:10px}
.lab .stat{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));
  gap:10px;
  margin:20px 0 27px;
}
.lab .stat>div{min-width:0;padding:18px 17px;background:var(--lab-soft);border:1px solid var(--lab-line);border-radius:10px}
.lab .stat b{font:500 clamp(23px,2.3vw,29px)/1.2 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.045em;margin-bottom:8px;overflow-wrap:anywhere}
.lab .stat span{display:block;font:400 11px/1.5 var(--sans);color:var(--lab-muted);letter-spacing:0;text-transform:none;overflow-wrap:break-word}
.lab .lab-controls{gap:9px;margin:20px 0;align-items:center}
.lab .btn,.lab .likert button{
  min-height:44px;
  border-radius:7px;
  padding:12px 18px;
  font:500 13px/1.55 var(--sans);
  white-space:normal;
  box-shadow:none;
  transition:background-color .16s,border-color .16s,box-shadow .16s;
}
.lab .btn:not(:disabled):hover{box-shadow:0 3px 10px #57383712}
.lab .btn.sec{background:var(--lab-surface);border-color:var(--lab-line);color:var(--ink)}
.lab .btn.sec:hover{background:var(--lab-soft);border-color:var(--lab-gold)}
.lab .btn:disabled{opacity:.65;box-shadow:none}
.lab .toggle{background:var(--lab-soft);border:1px solid var(--lab-line);border-radius:7px;min-height:44px;font:400 12px/1.6 var(--sans);padding:10px 13px}
.lab input[type=checkbox],.lab input[type=radio]{accent-color:var(--lab-accent);width:17px;height:17px;flex:none;cursor:pointer}
.lab .field span{font:400 12px/1.6 var(--sans);margin-bottom:7px;color:var(--lab-muted)}
.lab .field input,.lab .field select,.lab .field textarea,.lab select{
  box-sizing:border-box;
  min-height:44px;
  border:1px solid var(--lab-line);
  border-radius:7px;
  background:var(--lab-soft);
  color:var(--ink);
  padding:11px 12px;
  font:400 14px/1.5 var(--sans);
  max-width:100%;
}
.lab textarea{resize:vertical}
.lab .field input:focus,.lab .field textarea:focus,.lab select:focus{border-color:var(--lab-accent)}
.lab :is(button,input,select,textarea,a):focus-visible{outline:2px solid var(--lab-gold);outline-offset:4px}
.lab .lab-slider{margin:13px 0;padding:16px 18px 11px;background:var(--lab-soft);border:1px solid var(--lab-line);border-radius:10px;min-width:0}
.lab .lab-slider>p,.lab .lab-slider>label,.lab .lab-slider>span:not(.lab-range-bounds){font:400 12px/1.6 var(--sans)!important;color:var(--ink);margin:0 0 9px!important;display:block}
.lab input[type=range]{
  --range-fill:50%;
  display:block;
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  max-width:100%;
  min-width:0;
  height:28px;
  min-height:28px;
  margin:3px 0;
  padding:0;
  border:0;
  border-radius:0;
  cursor:pointer;
  background:transparent;
  accent-color:var(--lab-accent);
}
.lab input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--lab-accent) var(--range-fill),var(--lab-line) var(--range-fill))}
.lab input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;margin-top:-7px;border:4px solid var(--lab-surface);border-radius:50%;background:var(--lab-accent);box-shadow:0 0 0 1px var(--lab-accent),0 2px 5px #0002;transition:box-shadow .15s}
.lab input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--lab-accent),0 0 0 5px var(--lab-accent-soft)}
.lab input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:var(--lab-line)}
.lab input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--lab-accent)}
.lab input[type=range]::-moz-range-thumb{width:12px;height:12px;border:4px solid var(--lab-surface);border-radius:50%;background:var(--lab-accent);box-shadow:0 0 0 1px var(--lab-accent)}
.lab input[type=range]:disabled{opacity:.5;cursor:not-allowed}
.lab-range-bounds{display:flex;justify-content:space-between;color:var(--lab-muted);font:400 10px/1.5 var(--sans);font-variant-numeric:tabular-nums;pointer-events:none}
.lab .readout{border:1px solid var(--lab-line);border-left:3px solid var(--lab-gold);border-radius:0 9px 9px 0;padding:17px 20px;margin-top:22px;background:var(--lab-soft);color:var(--ink);font-size:12px;line-height:1.8;overflow:auto}
.lab .readout.lab-prose-readout{font:400 13px/1.9 var(--sans);white-space:normal}
.lab .callout{border:1px solid var(--lab-line);border-left:3px solid var(--lab-gold);border-radius:0 9px 9px 0;padding:20px 22px;margin:23px 0 0;background:var(--lab-surface)}
.lab .callout .ct{font:500 10px/1.6 var(--sans);letter-spacing:.09em;color:var(--lab-gold);margin-bottom:10px}
.lab .callout p{font:400 13px/1.9 var(--sans);margin:8px 0;color:var(--lab-muted)}
.lab .callout p:last-child{margin-bottom:0}
.lab .callout b,.lab .callout strong{color:var(--ink)}
.lab .bar{height:7px;margin:8px 0 17px}
.lab .bar i{height:7px}
.lab .arg{padding:20px;background:var(--lab-soft);border:1px solid var(--lab-line);border-radius:9px}
.lab table{max-width:100%;font-variant-numeric:tabular-nums}
.lab-table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--lab-line);border-radius:9px;margin:18px 0}
.lab-table-scroll>table{margin:0!important;min-width:100%;border-collapse:collapse}
.lab-table-scroll td,.lab-table-scroll th{padding:11px 12px}
.lab-table-scroll th{background:var(--lab-soft);font:500 11px/1.5 var(--sans);color:var(--lab-muted)}
.lab-table-scroll td{border-bottom:1px solid var(--lab-line)}
.lab-table-scroll tr:last-child td{border-bottom:0}
.lab-jump{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:19px 22px;background:var(--lab-surface);border:1px solid var(--lab-line);border-radius:12px;margin:6px 0 2px;font-family:var(--sans)}
.lab-jump label{font-size:12px;color:var(--ink);font-weight:500;white-space:nowrap}
.lab-jump label small{display:block;color:var(--lab-muted);font-size:10px;font-weight:400;margin-top:3px}
.lab-jump select{width:min(100%,330px);min-width:0;min-height:44px;padding:10px 13px;border:1px solid var(--lab-line);background:var(--lab-soft);border-radius:7px;font:400 12px/1.5 var(--sans);color:var(--ink);cursor:pointer}
.lab-jump select:focus-visible{outline:2px solid var(--lab-gold);outline-offset:3px}
@media(max-width:600px){
  .lab{padding:21px 18px;border-radius:13px;margin:24px 0}
  .lab>.labk{font-size:8px;letter-spacing:.06em;gap:8px;margin-bottom:16px;padding-bottom:13px;line-height:1.8}
  .lab>h3{font-size:30px}
  .lab>p.soft{font-size:12px;line-height:1.8;margin-bottom:20px}
  .lab .fig-svg{padding:7px;border-radius:9px;margin:18px 0}
  .lab .stat{grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));gap:8px;margin:17px 0 21px}
  .lab .stat>div{padding:13px 11px}
  .lab .stat b{font-size:23px}
  .lab .stat span{font-size:10px}
  .lab .lab-slider{padding:13px 12px 9px}
  .lab .lab-slider>p,.lab .lab-slider>label{font-size:11px!important}
  .lab .btn,.lab .likert button{font-size:11px;padding:10px 13px}
  .lab .readout,.lab .callout{padding:15px;margin-top:18px}
  .lab .readout.lab-prose-readout,.lab .callout p{font-size:12px}
  .lab .grid2{grid-template-columns:repeat(auto-fit,minmax(min(135px,100%),1fr))}
  .lab .profile .row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 2.7rem;gap:6px;font-size:11px}
  .lab .orow{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 3rem;font-size:11px;gap:6px}
  .lab-jump{flex-direction:column;align-items:stretch;padding:17px;gap:12px}
  .lab-jump select{width:100%}
}
@media(prefers-reduced-motion:reduce){.lab *{transition:none!important}}

/* Some courses render sliders as inline flex rows with a separate value. */
.lab .lab-slider{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:0;margin:13px 0!important}
.lab .lab-slider>p,.lab .lab-slider>label,.lab .lab-slider>span{min-width:0!important;grid-column:1;grid-row:1}
.lab .lab-slider>input[type=range]{grid-column:1/-1;grid-row:2}
.lab .lab-slider>.lab-range-bounds{grid-column:1/-1;grid-row:3}
.lab .lab-slider>input~span{grid-column:2;grid-row:1;text-align:right;max-width:12ch;font-weight:500!important;color:var(--lab-accent)!important}
.lab .labk::before,.lab .labk::after{display:none}
.lab>.labk::before{display:block}
.lab :not(.lab)>.labk{display:block;letter-spacing:.025em}
.lab h3[tabindex="-1"]:focus{outline:none}
.lab [style*="display:grid"]>*{min-width:0}
.lab [data-bh]{overflow-wrap:anywhere}
@media(max-width:600px){
  .lab .fig-svg[data-lab-wide]{scrollbar-width:thin;scrollbar-color:var(--lab-gold) var(--lab-soft);overscroll-behavior-x:contain}
  .lab .fig-svg[data-lab-wide] svg{min-width:var(--lab-figure-width)!important;max-width:none}
  .lab .fig-svg[data-lab-wide]::after{content:'↔ График можно прокрутить';position:sticky;left:0;display:block;margin-top:12px;color:var(--lab-muted);font:400 10px/1.6 var(--sans)}
  .lab b[style*="white-space:nowrap"]{white-space:normal!important}
  .lab [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .lab span[style*="min-width"]{min-width:0!important;max-width:100%}
  .lab [style*="display:flex"]>span[style*="flex:1"]{min-width:0;overflow-wrap:anywhere}
  .lab .lab-bar-comparison{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px!important;margin:15px 0!important}
  .lab .lab-bar-comparison>span{grid-row:1;min-width:0!important;font-size:11px!important;line-height:1.5!important}
  .lab .lab-bar-comparison>div{grid-row:2;grid-column:1/-1;height:9px!important}
  .lab .lab-detail-row{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px!important;margin:10px 0!important}
  .lab .lab-detail-row>span{min-width:0!important;overflow-wrap:anywhere;line-height:1.6!important}
  .lab .lab-comparison-row{display:grid!important;grid-template-columns:minmax(0,1.3fr) repeat(var(--comparison-columns),minmax(0,1fr));gap:5px!important}
  .lab .lab-comparison-row>span{min-width:0!important;font-size:10px!important;line-height:1.5!important;overflow-wrap:anywhere}
}