/* Режим показа: масштаб шрифта, полный экран, скрытие меню, доска для рисования.
   Подключается последним, поэтому перебивает инлайновые стили (важно для lab01). */

:root{ --fs:1; }
html{ font-size:calc(16px * var(--fs)); }
body{ font-size:1rem; }

/* ---------- панель ---------- */
.pbar{
  position:fixed; right:18px; bottom:18px; z-index:40;
  display:flex; gap:6px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 7px; box-shadow:var(--shadow);
}
.pbar button{
  width:34px; height:34px; padding:0; border-radius:999px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); cursor:pointer;
  font:inherit; font-size:.9rem; line-height:1;
  display:grid; place-items:center; transition:background .13s,color .13s,border-color .13s;
}
.pbar button:hover{ background:var(--surface-2); color:var(--accent); border-color:var(--line) }
.pbar button.on{ background:var(--accent); border-color:var(--accent); color:#fff }
:root[data-theme="dark"] .pbar button.on{ color:#0d121a }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pbar button.on{ color:#0d121a } }
.pbar .sep{ width:1px; height:20px; background:var(--line); margin:0 2px }
.pbar .fsval{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--ink-3);
  min-width:2.6em; text-align:center; user-select:none;
}
/* старая одиночная кнопка темы прячется — она переехала в панель */
.theme-btn{ display:none !important }

/* ---------- скрытие меню ---------- */
@media(min-width:1060px){
  body.rail-off .cols{ grid-template-columns:minmax(0,1fr) }
  body.rail-off .rail{ display:none }
}
body.rail-off .rail{ display:none }

/* ---------- доска ---------- */
.wb-wrap{ position:fixed; inset:0; z-index:30; display:none }
body.wb-on .wb-wrap{ display:block }
body.wb-on{ overflow:hidden }
.wb-canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair }
body.wb-blank .wb-canvas{ background:var(--surface) }
.wb-tools{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:41;
  display:flex; flex-wrap:wrap; gap:7px; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:8px 11px; box-shadow:var(--shadow); max-width:calc(100vw - 24px);
}
.wb-tools button{
  height:32px; padding:0 11px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); cursor:pointer; font:inherit; font-size:.8rem;
}
.wb-tools button:hover{ border-color:var(--accent); color:var(--accent) }
.wb-tools button.on{ background:var(--accent); border-color:var(--accent); color:#fff }
:root[data-theme="dark"] .wb-tools button.on{ color:#0d121a }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .wb-tools button.on{ color:#0d121a } }
.wb-sw{
  width:26px; height:26px; border-radius:999px; border:2px solid var(--line);
  cursor:pointer; padding:0; flex:none;
}
.wb-sw.on{ border-color:var(--ink); transform:scale(1.14) }
.wb-tools input[type=range]{ width:92px; accent-color:var(--accent) }
.wb-tools .lbl{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600 }
.wb-hint{
  position:fixed; left:50%; transform:translateX(-50%); top:14px; z-index:41;
  font-size:.78rem; color:var(--ink-3); background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:5px 14px; box-shadow:var(--shadow);
}

@media print{ .pbar,.wb-wrap,.wb-tools,.wb-hint{ display:none !important } }

/* ---------- слайды ---------- */
body.sl .rail, body.sl footer, body.sl .masthead{ display:none }
body.sl.sl-title .masthead{ display:block; border-bottom:0 }
body.sl .cols{ display:block; margin-top:0 }
body.sl .wrap{ max-width:1500px; padding-bottom:0 }
body.sl main{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(24px,5vh,56px) 110px }
body.sl.sl-title main{ display:none }
body.sl.sl-title .wrap{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-bottom:80px }
body.sl .beat{ display:none; margin:0 }
body.sl .beat.sl-cur{ display:block }
body.sl .beat.sl-cur .card{ display:none }
body.sl .beat.sl-cur .card.sl-cur{ display:block }
body.sl .two{ display:block }
body.sl .say{ display:none }
body.sl.sl-notes .say, body.sl.sl-nocard .say{ display:block }
body.sl.sl-notes .say{ order:2; border-style:dashed; opacity:.9 }
body.sl .stack{ gap:14px }

.sl-bar{ position:fixed; left:18px; bottom:18px; z-index:40; display:none; align-items:center; gap:6px;
  max-width:calc(100vw - 440px); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 7px; box-shadow:var(--shadow); overflow:hidden }
.sl-bar button{ width:34px; height:34px; flex:none; border-radius:999px; border:1px solid transparent;
  background:transparent; color:var(--ink-2); cursor:pointer; font:inherit; font-size:1.2rem; line-height:1 }
.sl-bar button.txt{ width:auto; padding:0 10px; font-size:.75rem; letter-spacing:.06em }
.sl-bar button:hover{ background:var(--surface-2); color:var(--accent); border-color:var(--line) }
.sl-bar button.on{ background:var(--accent); border-color:var(--accent); color:#fff }
:root[data-theme="dark"] .sl-bar button.on{ color:#0d121a }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sl-bar button.on{ color:#0d121a } }
.sl-bar .pos{ font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--ink-2); min-width:4.2em; text-align:center; user-select:none }
.sl-bar .lbl{ flex:1; min-width:0; font-size:.8rem; color:var(--ink-3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; padding:0 6px; user-select:none }
.sl-prog{ position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent }
.sl-prog i{ display:block; height:100%; background:var(--accent); transition:width .2s }
@media(max-width:760px){ .sl-bar{ max-width:calc(100vw - 36px); bottom:74px } .sl-bar .lbl{ display:none } }
@media print{ .sl-bar{ display:none !important } }
