/* playlist.css — styles for the «Плейлист» screen (public/playlist.js).
   Everything is scoped under .plscreen so it never collides with the monolith's classes.
   Colours lean on the app's existing CSS variables (--accent, --card, --ink, --muted, --bg);
   line/drop tones are defined locally. */
.plscreen{
  position:relative;
  --pl-line:var(--line-soft);
  --pl-src-bg:var(--accent-tint);
  --pl-drop:var(--accent-fill);
  --pl-tile:#ffffff;
  --pl-shadow:0 3px 12px rgba(30,60,90,.08);
}

/* loading overlay — a clear, unmistakable indicator over the whole screen while adding/uploading */
.plscreen .pl-overlay{display:none;position:absolute;inset:0;z-index:30;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(1.5px)}
.plscreen .pl-spinner{width:42px;height:42px;border-radius:50%;
  border:4px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);
  animation:pl-spin .8s linear infinite}
@keyframes pl-spin{to{transform:rotate(360deg)}}
.plscreen .pl-ovtext{font-weight:700;font-size:14px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.plscreen .pl-spinner{animation-duration:2s}}

.plscreen .pl-lead{color:var(--muted);font-size:14px;line-height:1.5;margin:2px 0 14px;max-width:60ch}

/* two-pane board */
.plscreen .pl-board{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.plscreen .pl-pane{background:var(--pl-tile);border:1px solid var(--pl-line);border-radius:14px;
  box-shadow:var(--pl-shadow);overflow:hidden;display:flex;flex-direction:column;min-height:360px}
.plscreen .pl-pane.pl-source{background:var(--pl-src-bg)}

/* blox33 #5 — на ПК (две колонки) панель-источник Я.Диска росла ПОД все файлы и «вылезала» далеко
   за высоту экрана. Ограничиваем высоту обеих панелей вьюпортом; тело источника (=.exp) тянется на
   всю панель, а его сетка (.exp-grid) скроллится внутри. Целевую сетку тоже скроллим — длинный
   плейлист не должен ронять окно. На телефоне действует нижний лист-шторка (медиа-блок ниже). */
@media(min-width:761px){
  .plscreen .pl-pane{max-height:calc(100vh - 200px)}
  .plscreen .pl-source .pl-srcbody{flex:1 1 auto;min-height:0}
  .plscreen .pl-target .pl-grid{overflow-y:auto}
}

.plscreen .pl-phead{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:11px 13px;min-height:52px;
  border-bottom:1px solid var(--pl-line);font-weight:700;font-size:15px}
.plscreen .pl-phead .pl-spacer{margin-left:auto}
/* счётчик и кнопки-действия не ломаются внутри себя; «Контрольный» прижат вправо (и остаётся справа
   при переносе на вторую строку на узком экране — иначе на 375px он вылезал за правый край, G1) */
.plscreen .pl-count{white-space:nowrap}
.plscreen .pl-phead .pl-lnk{white-space:nowrap}
.plscreen #pl-ctrlbtn{margin-left:auto}
/* фирменный квадратик «Я» — нужен и вне .plscreen: во вкладках листа сдачи ученика и в шапке
   окна проводника (.exp-winhead лежит на .exp-sheet, вне .plscreen — иначе «Я» рисуется чёрной
   буквой вместо красного яндекс-квадрата, story 7-bis) */
.plscreen .pl-ya, .src-tabs .pl-ya, .exp-winhead .pl-ya{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;
  border-radius:5px;background:#fc3f1d;color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}
.plscreen .pl-count{font-size:13px;font-weight:700;color:var(--muted)}

/* breadcrumb */
.plscreen .pl-bread{display:flex;align-items:center;gap:6px;padding:9px 13px;font-size:13px;
  color:var(--muted);border-bottom:1px solid var(--pl-line);flex-wrap:wrap}
.plscreen .pl-bread b{color:var(--ink);font-weight:700}
.plscreen .pl-bread .pl-sep{opacity:.5}
.plscreen .pl-bread .pl-lnk{color:var(--accent-dark);cursor:pointer}
.plscreen .pl-bread .pl-lnk:hover{text-decoration:underline}

/* tile grid */
.plscreen .pl-grid{padding:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
  flex:1;align-content:start;grid-auto-rows:max-content;min-height:120px}
/* grid-auto-rows:max-content — лечит корень бага режима «Значки»: плитка это flex-колонка
   (иконка → имя с переносом → бейдж «видео»), а грид с auto-строками грубо НЕДООЦЕНИВАЛ её высоту
   (мерил ~иконку+строку ≈67px вместо реальных ~100px). Плитка растягивалась/вылезала за заниженный
   трек: сперва контент вываливался НИЖЕ рамки, а после — сама плитка налезала на соседнюю снизу и
   прятала свою нижнюю границу (rule 5/G9). max-content считает трек по ПОЛНОЙ высоте контента, плитки
   ровные, границы целы. В «Таблице» (одна колонка) строки одностроч­ные — max-content им не вредит. */
.plscreen .pl-tile{position:relative;background:var(--pl-tile);border:1px solid var(--pl-line);
  border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:7px;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:transform .12s,box-shadow .12s,border-color .12s}
.plscreen .pl-source .pl-tile{cursor:grab}
.plscreen .pl-tile:hover{transform:translateY(-2px);box-shadow:var(--pl-shadow);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--pl-line))}
.plscreen .pl-tile.pl-folder{background:color-mix(in srgb,var(--accent) 8%,var(--pl-tile))}
.plscreen .pl-tile .pl-ico{font-size:19px;line-height:1}
.plscreen .pl-tile .pl-nm{font-weight:650;font-size:13.5px;line-height:1.25;word-break:break-word}
.plscreen .pl-tile .pl-meta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.plscreen .pl-tile.pl-drag{opacity:.4}

/* by-reference badge (ярлык / видео) — blue, like a hyperlink */
.plscreen .pl-badge{font-size:10.5px;font-weight:800;letter-spacing:.3px;color:var(--accent-dark);
  background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:6px;padding:1px 6px}

/* контрольный файл: акцентная рамка + полноценный флаг-чип НА строке (Task3, было — иконка в углу).
   Чип кликабелен: снимает контрольность. Текст --accent-dark на светлой заливке акцента (контраст
   AA, как у .pl-badge), поэтому читается в любой цветосхеме. align-self:flex-start — чип не тянется
   на всю ширину плитки в режиме «Значки» (колонка); в «Таблице» (строка) встаёт в ряд. */
.plscreen .pl-tile.pl-control{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--pl-tile))}
.plscreen .pl-ctrlflag{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  padding:3px 9px;border-radius:7px;font:inherit;font-weight:750;font-size:11.5px;letter-spacing:.2px;
  color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);cursor:pointer;line-height:1.1}
.plscreen .pl-ctrlflag .ic{width:13px;height:13px}
.plscreen .pl-ctrlflag:hover{background:color-mix(in srgb,var(--accent) 28%,transparent)}
/* взведён режим «Контрольный»: панель подсвечена, файлы читаются как нажимаемые */
.plscreen .pl-target.pl-arming{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 40%,transparent)}
.plscreen .pl-target.pl-arming .pl-plfile{cursor:pointer}
/* кнопки-действия в шапке панели (Выбрать/Контрольный) — иконка+подпись в ряд */
.plscreen .pl-phead .pl-lnk{display:inline-flex;align-items:center;gap:4px}
/* «Контрольный»: рамку резервируем ВСЕГДА (прозрачная в покое) — при взводе она лишь окрашивается,
   без скачка размера (blox28 #6). Взведён = мерцающая пульсирующая рамка «ждёт тапа по файлу». */
.plscreen #pl-ctrlbtn{border:1px solid transparent;border-radius:8px;padding:3px 9px;transition:border-color .12s}
.plscreen #pl-ctrlbtn.on{color:var(--accent-dark);font-weight:750;border-color:var(--accent);
  animation:pl-ctrlpulse 1.1s ease-in-out infinite}
@keyframes pl-ctrlpulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){.plscreen #pl-ctrlbtn.on{animation:none}}

/* remove-from-playlist button on a right-pane tile */
.plscreen .pl-rm{position:absolute;top:6px;right:6px;border:none;background:rgba(73,54,87,.08);
  color:var(--muted);width:22px;height:22px;border-radius:7px;cursor:pointer;font-size:13px;
  display:none;align-items:center;justify-content:center;line-height:1}
.plscreen .pl-tile:hover .pl-rm{display:inline-flex}
.plscreen .pl-rm:hover{background:var(--alert-fill);color:var(--alert)}

/* drop affordance on the playlist pane */
.plscreen .pl-pane.pl-over{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent),var(--pl-shadow)}
.plscreen .pl-hint{margin:0 12px 12px;padding:9px 12px;border-radius:10px;font-size:12.5px;
  color:var(--muted);background:color-mix(in srgb,var(--accent) 7%,transparent)}

.plscreen .pl-empty{padding:24px 14px;color:var(--muted);font-size:13.5px;text-align:center}
.plscreen .pl-msg{padding:6px 13px;font-size:12.5px;min-height:18px}
.plscreen .pl-msg.err{color:var(--alert)}
.plscreen .pl-msg.ok{color:var(--checked)}
/* строка загрузки: текст + заполняемая полоска справа + ✕ отмены (blox24 #4) */
.plscreen .pl-msg.pl-uploading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.plscreen .pl-upbar{flex:0 1 110px;height:6px;border-radius:99px;background:var(--pl-line);overflow:hidden}
.plscreen .pl-upbar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);
  transition:width .15s ease}
.plscreen .pl-upx{border:none;background:rgba(73,54,87,.08);color:var(--muted);width:24px;height:24px;
  border-radius:7px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;
  justify-content:center;line-height:1;flex:none}
.plscreen .pl-upx:hover{background:var(--alert-fill);color:var(--alert)}

/* clickable link/button used outside breadcrumbs (＋ Новая папка, back-to-root, Выбрать) */
.plscreen .pl-lnk{color:var(--accent-dark);cursor:pointer;background:none;border:none;font:inherit;font-weight:700;padding:0}
.plscreen .pl-lnk:hover{text-decoration:underline}
.plscreen .pl-up{margin-right:8px}
.plscreen .pl-formrow{display:flex;align-items:center;gap:14px;margin-top:10px}

/* playlist pane bar: breadcrumb when inside a folder, or the «＋ Новая папка» control at root */
.plscreen .pl-plbar{display:flex;align-items:center;gap:6px;padding:8px 13px;
  border-bottom:1px solid var(--pl-line);font-size:13px;color:var(--muted)}
.plscreen .pl-plbar b{color:var(--ink);font-weight:700}

/* screen header + view toggle (Значки / Таблица) */
.plscreen .pl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plscreen .pl-head h2{margin:0}
.plscreen .pl-viewtoggle{display:inline-flex;gap:3px;
  background:color-mix(in srgb,var(--muted) 12%,transparent);padding:3px;border-radius:11px}
.plscreen .pl-vbtn{border:none;cursor:pointer;font:inherit;font-weight:700;font-size:13px;
  color:var(--muted);background:none;border-radius:9px;padding:7px 12px}
.plscreen .pl-vbtn.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(30,60,90,.12)}

/* source segmented switch (Я.Диск / С устройства) — the source pane's header */
.plscreen .pl-srcswitch{gap:4px;padding:8px 10px}
.plscreen .pl-seg{display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;font:inherit;
  font-weight:700;font-size:13px;color:var(--muted);border-radius:9px;padding:7px 11px;
  background:color-mix(in srgb,var(--muted) 10%,transparent)}
.plscreen .pl-seg.on{background:var(--accent);color:var(--ink)}
.plscreen .pl-seg.on .pl-ya{background:#fff;color:#fc3f1d}
/* «⋯» inside the Диск-школы tab → change the pinned folder. blox28 #6: рамка ВСЕГДА (и в покое,
   и при нажатии), чтобы точки читались как КНОПКА — раньше без рамки владелец не понял, что они
   кликабельны. Размер в покое = размеру нажатого (рамка в обоих состояниях, скачка нет); при
   наведении добавляется ровно прежняя заливка. Цвет рамки = currentColor (адаптируется к схеме и к
   тому, активен ли сегмент). */
.plscreen .pl-dots{margin-left:8px;padding:1px 6px;border-radius:6px;font-weight:800;letter-spacing:1px;
  opacity:.85;border:1px solid color-mix(in srgb,currentColor 32%,transparent)}
.plscreen .pl-dots:hover{opacity:1;background:rgba(73,54,87,.16)}

/* multi-select: checkbox marker, selected tile, the «Добавить (N)» bar */
.plscreen .pl-check{position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--accent);background:var(--card);color:var(--accent-dark);font-size:12px;
  font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.plscreen .pl-tile.pl-sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--pl-tile))}
.plscreen .pl-selbar:empty{display:none}
.plscreen .pl-selbar{padding:10px 12px;border-top:1px solid var(--pl-line);
  position:sticky;bottom:0;background:var(--card)}
.plscreen .pl-addbtn{width:100%}

/* «С устройства» — one minimal drop area, the whole box is clickable */
.plscreen .pl-devbox{margin:14px;min-height:150px;padding:26px 16px;cursor:pointer;
  border:2px dashed var(--pl-line);border-radius:12px;display:flex;align-items:center;
  justify-content:center;text-align:center;color:var(--muted);font-weight:600;font-size:14px}
.plscreen .pl-devbox:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--pl-line))}
.plscreen .pl-devbox.pl-over{border-color:var(--accent);background:var(--pl-drop);color:var(--accent-dark)}

/* drop-onto-breadcrumb-root highlight (move a file back to root) */
.plscreen .pl-lnkover{text-decoration:underline;color:var(--accent)}

/* ---- TABLE (Таблица) view — the grid of tiles becomes dense rows ----
   The class lives on the .pl-board of the «Плейлист» screen AND on the file-source panel of the
   «Новый таск» window (which is always a table — blox15 #4). So the rules key off .pl-list itself,
   not off the board: one implementation of the table for both places. */
.pl-list .pl-grid{grid-template-columns:1fr;gap:0;padding:4px 8px}
.pl-list .pl-tile{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;min-width:0;
  border:none;border-radius:0;box-shadow:none;background:none;
  border-bottom:1px solid var(--pl-line)}       /* волосок-разделитель, как в списке Я.Диска */
.pl-list .pl-grid .pl-tile:last-child{border-bottom:none}
.pl-list .pl-tile:hover{transform:none;box-shadow:none;
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.pl-list .pl-tile.pl-folder{background:none}
.pl-list .pl-tile.pl-sel{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pl-list .pl-tile .pl-ico{font-size:17px}
/* имя — одна строка с многоточием (в окне ищут файл по имени; переносить нельзя, иначе строка
   раздувается за правый край на 375px, G1). min-width:0 нужен, чтобы ellipsis сработал во flex. */
.pl-list .pl-tile .pl-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-list .pl-tile .pl-meta{margin:0}
.pl-list .pl-check{position:static;margin-right:2px}
.pl-list .pl-rm{position:static;margin-left:auto}

/* Story 7 — панель группового удаления в целевой панели плейлиста («Удалить (N)») */
.plscreen .pl-selbar{flex:0 0 auto;padding:8px 12px;border-top:1px solid var(--pl-line)}
.plscreen .pl-selbar:empty{display:none}
.plscreen .pl-selbar .pl-addbtn{width:100%;justify-content:center;gap:8px}
/* чекбокс в целевой панели в режиме галочек — тот же, что у источника (.pl-check) */
.plscreen .pl-target .pl-plfile{cursor:pointer}

@media (max-width:760px){
  .plscreen .pl-board{grid-template-columns:1fr}
  .plscreen .pl-rm{display:inline-flex}   /* no hover on touch — always show remove */

  /* blox33 — ТЕЛЕФОН: два проводника-полки ОДИНАКОВОЙ фиксированной высоты (--pl-shelf), сложенные
     в столбик. Диск сверху виден целиком «как на старте», плейлист чуть выглядывает снизу; между
     полками двигаешься общим скроллом окна. У КАЖДОЙ полки свой внутренний скролл списка файлов
     (источник — .exp-grid внутри проводника, плейлист — .pl-grid), поэтому листание файлов не
     дёргает всё окно. Убрали выезжающую шторку (position:fixed + грип) — теперь обе полки в потоке. */
  /* Высота полки = экран − постоянная «шапка» (стики-хедер + заголовок + Предпросмотр ≈ 380px), поэтому
     диск занимает почти весь фолд, а плейлист выглядывает снизу на ~110px ОДИНАКОВО на любом телефоне
     (vh сокращается: пик зависит только от 380 и высоты шапки, не от размера экрана). dvh, а не vh —
     чтобы адресная строка мобильного браузера не «съедала» пик. max() держит диск читаемым на мелких. */
  .plscreen{--pl-shelf:max(300px, calc(100dvh - 380px))}
  .plscreen .pl-pane{height:var(--pl-shelf);max-height:var(--pl-shelf);min-height:0}
  .plscreen .pl-source .pl-srcbody{flex:1 1 auto;min-height:0}
  .plscreen .pl-target .pl-grid{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* Квадрат «Файл» в окне «Новый таск» (mountFileSource). Story 7: проводник Я.Диска уехал в отдельное
   окно, здесь остались кнопки-триггеры + зона «с устройства» + карточка выбранного. flex-колонка. */
.pl-filesrc{display:flex;flex-direction:column;min-height:0;margin:2px 0 8px}
.pl-filesrc .pl-devbox{min-height:88px;margin:10px;padding:16px 14px}
.pl-filesrc .pl-msg{flex:0 0 auto;padding:4px 11px;min-height:0}
.pl-filesrc .pl-msg:empty{display:none}
.pl-filesrc .pl-picked{flex:0 0 auto}

/* Story 7 (blox33 #1) — квадрат «Файл»: кнопки-триггеры вместо встроенной панели. Я.Диск открывается
   отдельным окном поверх; тело (.pl-srcbody) пустует, пока не нажали «С устройства». */
.pl-srcbtns{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.pl-srcbtns button{flex:1 1 auto;min-height:44px}
/* «Приложить с другого Диска» — редкое действие (перепривязка), поэтому неброская ссылка под кнопкой */
.pl-relink{margin:10px 2px 2px;font-size:12.5px}
.pl-relink a{color:var(--muted);text-decoration:underline}
.pl-filesrc .pl-srcbody{flex:0 0 auto;min-height:0;overflow:visible}
.pl-filesrc .pl-srcbody:empty{display:none}

/* ВЫБРАННЫЙ файл — карточка под проводником, а не строка текста «Выбрано: …» (blox15 #4).
   Учитель видит сам файл: иконку по типу, имя, «ярлык» у видео и ✕, чтобы отменить выбор. */
.pl-picked:empty{display:none}
.pl-picked{margin-top:8px}
.pl-pickedcard{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--pl-tile))}
.pl-pickedcard .pl-ico{font-size:19px;line-height:1;display:flex}
.pl-pickedcard .pl-nm{flex:1;font-weight:650;font-size:13.5px;line-height:1.3;word-break:break-word}
.plscreen .pl-pickedcard .pl-rm{position:static;display:inline-flex}