/* Экран конспекта: верхняя панель, лист с масштабом, бесконечная доска
   с инструментами как в Miro. */

#screen-note.active {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding-bottom: 0;
  overflow: hidden;
}

/* ── Верхняя панель ───────────────────────────────────────────────────── */

.note-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + var(--sat)) 12px 8px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  z-index: 6;
}
.seg { display: flex; padding: 2px; background: var(--ground-deep); border-radius: 12px; gap: 2px; }
.seg-btn {
  border: 0; background: transparent; color: var(--text-soft);
  font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  /* 44 px — палец на ходу. Раньше кнопка была 30 px высотой и в неё
     промахивались на первом же переключении «Лист → Доска». */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease, transform .09s ease;
}
.seg-btn[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-btn:active { transform: scale(.96); }

.tools-zoom { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.tool-btn {
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .12s ease, transform .09s ease;
}
.tool-btn:active { background: var(--ground-deep); transform: scale(.94); }
/* Показывает масштаб, по нажатию — «вписать всё». Это единственный способ
   вернуться к объектам с бесконечной доски, поэтому выглядит как кнопка,
   а не как подпись. */
.zoom-val {
  border: 0; background: var(--ground-deep); color: var(--text-soft);
  font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 52px; min-height: 34px; cursor: pointer;
  padding: 6px 10px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background .12s ease, color .12s ease, transform .09s ease;
}
.zoom-val:active { color: var(--text); transform: scale(.95); }

.edit-btn {
  border: 0; border-radius: 10px; padding: 8px 14px;
  background: var(--accent); color: var(--accent-text);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.edit-btn[hidden] { display: none; }

/* Телефон: в шапке конспекта помещается не всё. Приближение и отдаление
   убираем — их крутят щипком. А «вписать» остаётся: с бесконечной доски
   это единственный способ вернуться к объектам, жеста для него нет. */
@media (max-width: 599px) {
  .note-tools { gap: 4px; padding: calc(8px + var(--sat)) 8px 8px; }
  .note-tools #zoom-in, .note-tools #zoom-out { display: none; }
  .note-tools .zoom-val { min-height: 44px; }
  /* Значок рамки: иначе «120 %» читается как подпись, а не как кнопка. */
  .note-tools .zoom-val::before { content: "⤢"; font-size: 13px; opacity: .75; }
  .seg-btn { padding: 6px 12px; font-size: 13px; }
  .edit-btn { padding: 8px 11px; font-size: 13px; margin-left: auto; min-height: 40px; }
}
.edit-btn.done { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* Стол под бумагой. В светлой теме — холодный лист картона со светом
   сверху; в тёмной — не инверсия, а глубокий сине-чёрный, темнее карточек,
   чтобы бумага на нём всплывала, а не проваливалась. */
:root {
  --board-bg: #E8EBF2;
  --board-dot: rgba(20, 24, 32, .16);
  --board-glow: radial-gradient(115% 70% at 50% -12%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  --board-vign: radial-gradient(120% 95% at 50% 45%, rgba(0,0,0,0) 52%, rgba(24,30,45,.07) 100%);
  --board-edge: rgba(20, 24, 32, .13);
}
/* Тёмная доска собрана отдельно: не инверсия светлой, а глубокий сине-серый
   с холодным светом сверху. Чистая чернота превращала стол в дыру, и бумага
   на ней выглядела вырезанной, а не положенной. */
html.dark {
  --board-bg: #0A0E15;
  --board-dot: rgba(160, 190, 225, .14);
  --board-glow: radial-gradient(120% 75% at 50% -14%, rgba(60, 110, 160, .24), rgba(60,110,160,0) 60%);
  --board-vign: radial-gradient(120% 95% at 50% 45%, rgba(0,0,0,0) 48%, rgba(0,0,0,.45) 100%);
  --board-edge: rgba(255, 255, 255, .16);
}

/* ── Режим «Лист» ─────────────────────────────────────────────────────── */

.board {
  flex: 1; min-height: 0; overflow: auto; position: relative;
  touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 1px 1px, var(--board-dot) 1px, transparent 0) 0 0 / 24px 24px,
    var(--board-vign),
    var(--board-glow),
    var(--board-bg);
}
.board[hidden] { display: none; }
.board-inner { position: relative; }
.sheet-wrap { position: absolute; left: 0; top: 0; transform-origin: 0 0; padding: 16px 12px 110px; }

/* ── Режим «Доска» ────────────────────────────────────────────────────── */

/* Стол доски.

   Собран из трёх слоёв: точки, мягкий свет сверху и своя подложка. Одна
   плоская заливка с точками читалась как страница с фоном, а не как стол,
   на котором лежат бумажки, — тени карточек не за что было зацепиться.

   --bx/--by/--bz заранее оставлены под сдвиг и масштаб мира: если скрипт
   начнёт их выставлять, сетка поедет вместе с объектами (сейчас она стоит
   на месте — просьба к владельцу js в ответе). */
.infinite {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  touch-action: none; cursor: grab;
  --dot: 24px;
  background:
    radial-gradient(circle at 1px 1px, var(--board-dot) 1px, transparent 0)
      var(--bx, 0px) var(--by, 0px) / calc(var(--dot) * var(--bz, 1)) calc(var(--dot) * var(--bz, 1)),
    var(--board-vign),
    var(--board-glow),
    var(--board-bg);
}
.infinite[hidden] { display: none; }
.infinite[data-tool="pen"] { cursor: crosshair; }
.infinite[data-tool="sticker"], .infinite[data-tool="text"], .infinite[data-tool="node"] { cursor: copy; }
.infinite[data-tool="shape"], .infinite[data-tool="line"], .infinite[data-tool="frame"] { cursor: crosshair; }
.infinite:active { cursor: grabbing; }

.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.blines, .binks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.blines { z-index: 1; }
.binks { z-index: 5; }
.blines .line-hit { stroke: transparent; stroke-width: 16; fill: none; pointer-events: stroke; cursor: pointer; }
.blines g.selected path:not(.line-hit) {
  filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 60%, transparent));
}
.blines .line-end {
  fill: var(--card); stroke: var(--accent); stroke-width: 2.5; pointer-events: all; cursor: move;
}
.blines .line-label {
  font: 600 12.5px var(--sans); fill: var(--text);
  stroke: var(--board-bg); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round;
  pointer-events: none;
}

/* Рамка выделения (Shift + протяжка по пустому месту) */
.marquee {
  position: absolute; z-index: 21; pointer-events: none;
  border: 1.5px solid var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.marquee[hidden] { display: none; }

/* ── Объекты ──────────────────────────────────────────────────────────── */

.bobj {
  position: absolute;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  z-index: 2;   /* уточняется скриптом: порядок в списке = порядок наложения */
}
.bobj.dragging { z-index: 9998 !important; cursor: grabbing; }
/* Выделение: тонкая обводка плюс мягкий ореол. Одна обводка терялась и на
   светлой бумаге, и на тёмном столе — по толщине её путали с рамкой самой
   карточки. */
.bobj.selected {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent),
              var(--shadow-lg);
}
html.dark .bobj.selected {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent),
              0 10px 30px -12px rgba(0, 0, 0, .9);
}

/* Карточка конспекта — та же бумага, что и лист, только порезанная. */
.kind-card {
  background: var(--paper); color: var(--ink);
  border-radius: 12px; padding: 13px 15px 14px;
  /* Волосяная линия по краю + двойная тень: без линии светлая бумага
     растворялась в светлом столе, без дальней тени карточка не «лежала». */
  box-shadow: 0 0 0 1px var(--board-edge),
              0 1px 2px rgba(16, 22, 34, .06),
              0 14px 28px -16px rgba(16, 22, 34, .38);
  font-family: var(--serif);
}
html.dark .kind-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07),
              0 2px 6px rgba(0, 0, 0, .5),
              0 18px 34px -18px rgba(0, 0, 0, .85);
}
.kind-card h2 { font-size: 16px; margin: 0 0 6px; line-height: 1.3; }
.kind-card p { font-size: 14px; line-height: 1.5; margin: 0 0 6px; }
.kind-card ul { margin: 4px 0 6px; padding-left: 18px; }
.kind-card li { font-size: 14px; line-height: 1.5; margin-bottom: 3px; }
.kind-card .formula { font-size: 14.5px; padding: 11px 10px; }
.kind-card .block { margin: 0; }
.kind-card .block-label { margin-bottom: 5px; }
.kind-card .type-definition, .kind-card .type-theorem { border-left: 0; padding-left: 0; }
.kind-card:has(.type-definition), .kind-card:has(.type-theorem) { border-left: 4px solid var(--accent); }
.kind-card:has(.is-exam) { background: var(--exam); border: 1px solid var(--exam-line); }
.kind-card .is-exam { background: transparent; border: 0; padding: 0; margin: 0; }
.kind-card .is-exam::before { display: none; }
/* 9.5 px «для тонкости» на ходу просто исчезали. */
.bcard-label {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
.bcard-label.exam { color: var(--exam-text); }
.ctype-tldr { background: var(--accent-soft); }
.ctype-tldr .bcard-label { color: var(--accent); }
.tldr-body { font-size: 15px; line-height: 1.55; }
.ctype-exam { background: var(--exam); border: 1px solid var(--exam-line); }
.bcard-list { margin: 0; padding-left: 18px; }
.bcard-list li { font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
.bcard-terms { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--sans); }
.bcard-terms span { font-size: 12px; padding: 4px 9px; border-radius: 7px; background: rgba(0,0,0,.06); color: var(--ink-soft); }
html.dark .bcard-terms span { background: rgba(255,255,255,.07); }

/* Текст внутри объектов: правится на месте. */
.obj-text {
  outline: none; white-space: pre-wrap; word-break: break-word;
  cursor: text; user-select: text; -webkit-user-select: text;
}
.obj-text:empty::before { content: attr(data-ph); color: rgba(0,0,0,.35); }
.bobj:not(.selected) .obj-text { cursor: grab; user-select: none; -webkit-user-select: none; }

.kind-sticker {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 15px; border-radius: 3px;
  /* Текст на стикере всегда тёмный: бумажки светлые в обеих темах,
     и белый по жёлтому не читается ни на одной. */
  color: #1F2937;
  box-shadow: 0 12px 24px -12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.18);
  font-family: var(--sans); line-height: 1.3; font-weight: 500;
  text-align: center;
}
.kind-sticker .obj-text { width: 100%; max-height: 100%; overflow: hidden; }
.kind-sticker .obj-text:empty::before { color: rgba(0,0,0,.4); }

.kind-text {
  min-width: 80px; padding: 4px 6px; color: var(--text);
  font-family: var(--sans); line-height: 1.4; border-radius: 4px;
}
.kind-text .obj-text:empty::before { color: var(--hint); }

/* Фигура: заливка отдельным слоем под текстом.

   Форма задаётся обрезкой (clip-path), и когда она висела на самом объекте,
   вместе с углами срезались ручка размера и «плюсы», а по краю ромба нельзя
   было попасть пальцем. Отдельный слой оставляет прямоугольник объекта целым. */
.kind-shape {
  display: grid; place-items: center; padding: 10px 12px;
  color: #1f2937;
  font-family: var(--sans); font-size: 14px; text-align: center;
}
.shape-fill {
  position: absolute; inset: 0; z-index: -1;
  background: var(--fill);
  border: 2px solid var(--stroke);
}
.shape-rect .shape-fill { border-radius: 2px; }
.shape-round .shape-fill { border-radius: 14px; }
.shape-ellipse .shape-fill { border-radius: 50%; }
.shape-diamond .shape-fill {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border: 0; box-shadow: inset 0 0 0 2px var(--stroke);
}
/* Жирная стрелка: указатель, в который можно вписать текст. */
.shape-arrow .shape-fill {
  clip-path: polygon(0 26%, 62% 26%, 62% 2%, 100% 50%, 62% 98%, 62% 74%, 0 74%);
  border: 0;
}
.shape-arrow .shape-text { padding-right: 34%; }
.shape-diamond .shape-text { max-width: 62%; }
.shape-text { max-width: 100%; }

/* ── Формула ──────────────────────────────────────────────────────────────
   Тот же кусок бумаги, что и карточка конспекта: формула на доске — это
   выписка из лекции, а не подпись к чему-то. Голый набор KaTeX висел прямо
   на столе и читался как случайно оброненные символы. */
.kind-formula {
  background: var(--paper); color: var(--ink);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 54px;
  display: grid; align-items: center;
  box-shadow: 0 0 0 1px var(--board-edge),
              0 1px 2px rgba(16, 22, 34, .06),
              0 14px 28px -16px rgba(16, 22, 34, .38);
}
html.dark .kind-formula {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07),
              0 2px 6px rgba(0, 0, 0, .5),
              0 18px 34px -18px rgba(0, 0, 0, .85);
}
/* Полоска слева — та же метка «это математика», что у определения на листе. */
.kind-formula::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 12px 0 0 12px;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
}
.kind-formula .obj-math {
  font-size: 16px; line-height: 1.3; text-align: center; color: var(--ink);
  /* Длинная формула шире коробки: даём ей уехать за край, но не рвать
     раскладку — обрезать нельзя, вместе с краем срежет ручки правки. */
  min-width: 0;
}
.kind-formula .katex-display { margin: 0; }
.kind-formula .katex { color: var(--ink); }

/* ── Фотография ───────────────────────────────────────────────────────────
   Снимок доски почти всегда светлый, и без края он растворялся в столе.
   Скругление вешаем на саму картинку: overflow:hidden на объекте срезал бы
   ручку размера и «плюсы», они торчат за его границы намеренно. */
.kind-image {
  border-radius: 12px;
  background: var(--card);
  /* У неподгруженного снимка высоты нет, и объект схлопывался в волосок —
     ни выделить, ни утащить, ни понять, что он вообще там есть. */
  min-height: 44px;
  box-shadow: 0 0 0 1px var(--board-edge),
              0 2px 5px rgba(16, 22, 34, .10),
              0 18px 34px -20px rgba(16, 22, 34, .55);
}
html.dark .kind-image {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14),
              0 20px 38px -20px rgba(0, 0, 0, .9);
}
/* Снимок не открылся: файл убрали, ссылка протухла, сети нет. Пустая рамка
   с крестиком браузера ничего не объясняла, а без высоты объект и вовсе
   схлопывался в полоску — ни выделить, ни удалить. Показываем словами. */
.obj-broken { display: none; }
/* !important — потому что display:block у самой картинки прибит инлайном из
   js (там же живут pointer-events, на которых держится выбор объектов), а
   инлайн классом не перебить. */
.kind-image.broken .obj-img { display: none !important; }
.kind-image.broken {
  border: 1.5px dashed color-mix(in srgb, var(--text-soft) 45%, transparent);
  background: var(--card);
}
.kind-image.broken .obj-broken {
  display: grid; align-content: center; justify-items: center; gap: 4px;
  position: absolute; inset: 0;
  padding: 12px 14px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 650;
  color: var(--text-soft); text-align: center;
}
.kind-image.broken .obj-broken::after {
  content: "Проверь сеть или сними заново";
  font-size: 11.5px; font-weight: 500; color: var(--hint);
}

/* pointer-events у картинки прибит инлайном в js — на нём держится весь
   выбор объектов на доске. Здесь только вид, ничего про события. */
.kind-image .obj-img { border-radius: 11px; }

/* ── Незнакомый объект ────────────────────────────────────────────────────
   Доска из новой версии, открытая старым приложением. Показываем честную
   заглушку вместо пустого места: иначе объект просто исчезает, человек
   двигает соседей на его место и теряет свою же работу при обновлении. */
.obj-unknown {
  min-height: 76px;
  display: grid; align-content: center; justify-items: center; gap: 3px;
  padding: 12px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--text-soft) 45%, transparent);
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--text-soft) 7%, transparent) 0 6px,
      transparent 6px 13px),
    var(--card);
  font-family: var(--sans); text-align: center;
}
.obj-unknown::before {
  content: "Незнакомый объект";
  font-size: 12.5px; font-weight: 700; color: var(--text-soft);
}
.obj-unknown::after {
  content: "Откройте в новой версии";
  font-size: 11.5px; color: var(--hint);
}

.bobj-handle {
  position: absolute; right: 0; bottom: 0; width: 15px; height: 15px;
  /* Белый квадратик в цветной оправе — как во всех досках. Сплошная
     заливка акцентом сливалась с обводкой выделения в одно пятно. */
  border-radius: 4px; background: var(--card); border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: nwse-resize; display: none;
  /* Размер задан в экранных точках: мир масштабируется, ручка — нет. */
  transform: scale(var(--iz, 1)) translate(50%, 50%);
  transform-origin: bottom right;
}
.bobj.selected .bobj-handle { display: block; }

/* Узел схемы: корень и ветки — заливка, лист — обводка цветом ветки. */
.kind-node {
  background: var(--node); border-radius: 12px; padding: 10px 14px;
  font-family: var(--sans); font-size: 14px; line-height: 1.4; min-height: 42px;
  box-shadow: var(--shadow-md);
}
.kind-node.lvl-0 { border-radius: 16px; padding: 14px 18px; font-size: 16px; font-weight: 700; text-align: center; }
.kind-node.lvl-1 { font-weight: 600; }
.kind-node.lvl-2 { background: var(--card); color: var(--text); border: 2px solid var(--node); box-shadow: var(--shadow-sm); }
.kind-node .obj-text:empty::before { color: currentColor; opacity: .55; }
.kind-node .obj-text { min-height: 1.4em; }

/* Область (фрейм): рамка с названием, под всеми объектами. */
.kind-frame {
  z-index: 0 !important;   /* область всегда под тем, что в ней лежит */
  /* Сплошная линия вместо пунктира: пунктир на доске уже занят — так
     показывают выделение протяжкой, и рамка лекции читалась как «сейчас
     что-то выделяется». */
  border: 1.5px solid color-mix(in srgb, var(--frame) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--frame) 6%, transparent);
  box-shadow: 0 24px 60px -40px color-mix(in srgb, var(--frame) 70%, transparent);
}
.kind-frame.selected { outline-offset: 5px; }
.frame-title {
  position: absolute;
  left: 0; top: -26px;
  max-width: 100%;
  padding: 4px 11px 5px;
  border-radius: 9px 9px 2px 0;
  background: var(--frame);
  color: #fff;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .01em;
  box-shadow: 0 -1px 8px -3px color-mix(in srgb, var(--frame) 80%, transparent);
  white-space: nowrap;
  outline: none;
  cursor: text;
}
.frame-title:empty::before { content: attr(data-ph); opacity: .7; }
.bobj:not(.selected) .frame-title { cursor: grab; }

/* «Плюсы» по сторонам выделенного объекта: нажал — новый рядом, потянул — туда */
.bobj-plus {
  position: absolute; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
  background: var(--card); color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font: 700 16px/1 var(--sans); display: none; place-items: center;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); cursor: crosshair;
  transition: background .12s ease, color .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .bobj-plus:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
}
/* Отступ считается уже после обратного масштаба, поэтому и кружок, и зазор
   до объекта остаются одного размера при любом приближении доски. */
.bobj-plus::after { content: ""; position: absolute; inset: -8px; }
/* «Плюсы» показываем у ОСОЗНАННО выделенного одиночного объекта — и на
   телефоне тоже. Прошлый раз их убрали с телефона потому, что они висели у
   всего подряд и пальцем в них попадали мимоходом; у выделенного объекта
   случайного нажатия не бывает — до него надо сначала дотронуться. */
.bobj.selected.solo .bobj-plus { display: grid; }
.bobj.selected.solo .bobj-plus:active { transform-box: border-box; filter: brightness(1.12); }
.bobj-plus[data-side="r"] {
  right: 0; top: 50%; transform-origin: right center;
  transform: scale(var(--iz, 1)) translate(calc(100% + 14px), -50%);
}
.bobj-plus[data-side="l"] {
  left: 0; top: 50%; transform-origin: left center;
  transform: scale(var(--iz, 1)) translate(calc(-100% - 14px), -50%);
}
.bobj-plus[data-side="t"] {
  top: 0; left: 50%; transform-origin: center top;
  transform: scale(var(--iz, 1)) translate(-50%, calc(-100% - 14px));
}
.bobj-plus[data-side="b"] {
  bottom: 0; left: 50%; transform-origin: center bottom;
  transform: scale(var(--iz, 1)) translate(-50%, calc(100% + 14px));
}
.bobj.dragging .bobj-plus { display: none; }

/* ── Панель инструментов доски ────────────────────────────────────────── */

.mtools {
  position: absolute; z-index: 20;
  display: flex; gap: 2px; padding: 6px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
html.dark .mtools { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .05) inset; }
/* На ноутбуке и планшете — слева столбиком, как в Miro. */
@media (min-width: 860px) {
  .mtools { left: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; }
  /* Двенадцать кнопок столбиком: по 44 px они не влезают в невысокое окно. */
  .mt { width: 42px; height: 42px; }
  .mpop { left: calc(100% + 10px); top: 0; }
  .mt-sep { width: 26px; height: 1px; margin: 3px auto; }
}
.mt-wrap { position: relative; }
.mt {
  width: 44px; height: 44px; border: 0; border-radius: 11px; background: transparent;
  color: var(--text-soft); cursor: pointer; display: grid; place-items: center;
  transition: background .13s ease, color .13s ease, transform .09s ease;
}
/* Подсветку по наведению — только там, где есть курсор: на тач-экране она
   залипала на последней нажатой кнопке и читалась как выбранный инструмент. */
@media (hover: hover) and (pointer: fine) {
  .mt:hover { background: var(--ground-deep); color: var(--text); }
}
.mt:active { transform: scale(.92); background: var(--ground-deep); }
.mt[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-text);
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 75%, transparent);
}
.mt[aria-pressed="true"]:active { background: var(--accent); }
.mt-sep { background: var(--line); }

.mpop {
  position: absolute; z-index: 25; display: none;
  min-width: 190px; padding: 12px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.mpop.open { display: block; }
.mpop-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; margin: 2px 2px 8px; }
.mpop-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.mpop-row:last-child { margin-bottom: 0; }
.mpop-hint { font-size: 11.5px; color: var(--hint); line-height: 1.4; margin-top: 6px; }
.mopt {
  border: 1px solid var(--line); border-radius: 9px; background: var(--ground);
  color: var(--text); font-size: 12.5px; padding: 6px 10px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .09s ease;
}
.mopt:active { transform: scale(.95); background: var(--ground-deep); }
@media (hover: hover) and (pointer: fine) {
  .mopt:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
}
.mopt[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.mopt.danger { color: var(--danger); }
.mopt.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.mopt.tpl { display: inline-flex; align-items: center; gap: 7px; }
.mopt.tpl svg { flex: none; color: var(--accent); }
.tpl-row { flex-direction: column; align-items: stretch; }
.mopt.sh { width: 40px; height: 36px; display: grid; place-items: center; padding: 0; }
.mopt.sh i { display: block; width: 20px; height: 15px; border: 2px solid currentColor; }
.sh-round { border-radius: 5px; }
.sh-ellipse { border-radius: 50%; }
.sh-diamond { transform: rotate(45deg) scale(.8); }
.mopt.sh i.sh-arrow { border: 0; background: currentColor;
  clip-path: polygon(0 30%, 60% 30%, 60% 5%, 100% 50%, 60% 95%, 60% 70%, 0 70%); }
/* Толщина пера: полоска показывает саму линию, а не подпись к ней. */
.nib-row { align-items: center; }
.mopt.nib { width: 42px; display: grid; place-items: center; padding: 8px 6px; }
.mopt.nib i { display: block; width: 24px; border-radius: 6px; background: currentColor; }

.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.swatches:empty { display: none; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); cursor: pointer; padding: 0;
  transition: transform .1s ease, box-shadow .12s ease;
}
.swatch:active { transform: scale(.88); }
html.dark .swatch { border-color: rgba(255,255,255,.18); }
/* «Авто» — цвет текста по теме: половина кружка тёмная, половина светлая. */
.swatch[data-color="auto"] { background: linear-gradient(135deg, #111827 50%, #F3F4F6 50%) !important; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* На телефоне — снизу строкой, попапы раскрываются вверх.

   Инструментов больше, чем влезает в 390 px, поэтому панель прокручивается
   вбок, как в мобильном Miro, а не сжимается до нечитаемых кнопок. */
@media (max-width: 859px) {
  .mtools {
    left: 8px; right: 8px; bottom: calc(10px + var(--sab));
    transform: none; flex-direction: row; gap: 0; padding: 5px;
    max-width: none; overflow-x: auto; overflow-y: visible;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mtools::-webkit-scrollbar { display: none; }
  /* Инструменты уходят за правый край — показываем это затуханием, иначе
     непонятно, что панель прокручивается и там есть ещё кнопки. */
  .mtools {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .mtools.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .mt-wrap { flex: none; }
  .mt { width: 44px; height: 44px; flex: none; }
  .mt-sep { width: 1px; height: 26px; margin: auto 4px; flex: none; }
  /* Попап привязан к экрану, а не к кнопке: панель прокручивается вбок,
     и привязанное к кнопке окно уезжало вместе с ней за край. */
  .mpop {
    position: fixed;
    left: 8px; right: 8px; bottom: calc(68px + var(--sab));
    top: auto; transform: none; min-width: 0; max-width: none;
    max-height: 52dvh; overflow-y: auto;
  }
  .mpop-row { gap: 7px; }
  .mopt { padding: 9px 12px; font-size: 13.5px; }
  .swatch { width: 30px; height: 30px; }
  .sel-bar { max-width: calc(100vw - 16px); }
  /* Пальцем в ручку размером 14 px не попасть — увеличиваем и её, и «плюсы». */
  .bobj-handle { width: 26px; height: 26px; }
  .bobj-rotate { width: 32px; height: 32px; }
}

/* Планшет в книжной ориентации: панель снизу, но места больше. */
@media (min-width: 600px) and (max-width: 859px) {
  .mtools { left: 50%; right: auto; transform: translateX(-50%); max-width: calc(100vw - 24px); }
  .mpop { left: 50%; right: auto; transform: translateX(-50%); width: 360px; }
}

/* Плашка над выделенным */
.sel-bar {
  position: absolute; z-index: 22;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); white-space: nowrap;
}
.sel-bar[hidden] { display: none; }
.sel-bar .swatches { margin: 0; }
.sel-bar .swatch { width: 22px; height: 22px; }
.sel-line { display: flex; gap: 4px; }
.sel-line[hidden] { display: none; }
.sel-bar .mopt { padding: 5px 9px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; }
.sel-bar { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
.sel-bar > * { flex: none; }
/* Мобильные размеры плашки стоят НИЖЕ базовых `.sel-bar .mopt`/`.swatch`:
   раньше они лежали в блоке выше и проигрывали по порядку — на телефоне
   кнопки оставались 24 px, хотя в медиа-запросе было написано 44. */
@media (max-width: 859px) {
  .sel-bar { flex-wrap: wrap; justify-content: center; overflow: visible; max-width: calc(100% - 16px); gap: 5px; padding: 7px 9px; }
  .sel-line { flex-wrap: wrap; justify-content: center; gap: 5px; }
  .sel-bar .mopt { min-width: 44px; min-height: 44px; padding: 8px 12px; font-size: 16px; justify-content: center; }
  .sel-bar .swatch { width: 32px; height: 32px; }
  .sel-bar .sel-input { min-height: 40px; font-size: 16px; }
}
.sel-bar .swatches { flex-wrap: nowrap; }
.sel-bar::-webkit-scrollbar { display: none; }
.sel-multi { display: flex; gap: 4px; }
.sel-multi[hidden], .sel-bar [hidden] { display: none; }
.sel-size { display: flex; gap: 4px; }
.sel-size[hidden] { display: none; }
.sel-size .mopt { min-width: 34px; justify-content: center; }
.sel-input {
  width: 108px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px;
  font: 13px var(--sans); background: var(--ground); color: var(--text); outline: none;
}
.sel-input:focus { border-color: var(--accent); }

/* Ручка поворота: над фигурой, того же размера при любом масштабе доски. */
/* Ручка поворота в левом нижнем углу — напротив ручки размера. Сверху
   висит плашка выделения, и там ручка оказывалась под ней. */
.bobj-rotate {
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 26px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
  border: 2px solid var(--accent);
  font-size: 15px;
  line-height: 1;
  cursor: grab;
  transform-origin: bottom left;
  transform: scale(var(--iz, 1)) translate(-50%, 50%);
}
.bobj.selected.solo .bobj-rotate { display: grid; }
/* Рамке лекции и карточкам конспекта крутиться незачем: они собираются
   из самого конспекта, а не расставляются руками. */
.kind-frame .bobj-rotate, .kind-card .bobj-rotate { display: none !important; }
.bobj.dragging .bobj-rotate { cursor: grabbing; }
@media (max-width: 859px) {
  .bobj-rotate { width: 32px; height: 32px; font-size: 18px; }
  .bobj-plus { width: 28px; height: 28px; font-size: 18px; }
  .bobj-plus::after { inset: -10px; }
}