/* iSeeYT — мобильный вид. ОДИН файл для сайта и для HTML-отчёта:
   сайт подключает его ссылкой (/static/mobile.css), отчёт — вшивает внутрь файла
   (html_report.py читает его при сборке).
   Включается классом html.mob. Его ставит скрипт движка: узкий экран / телефон
   либо выбор человека (кнопка «Для телефона / Полная версия», ключ cm_view).
   Здесь только общее: таблицы -> карточки, свёртка фильтров и итогов, окна-шторки.
   Каркас страницы (шапка, меню, нижняя панель) оформляют app.css и шаблон отчёта. */

/* ---------- таблицы основной области -> карточки ---------- */
html.mob #main .wrap{overflow:visible;background:none;border:0;box-shadow:none;border-radius:0}
html.mob #main .wrap>table,html.mob #main .wrap>table>tbody{display:block;width:100%}
html.mob #main .wrap>table>thead{display:none}
html.mob #main .wrap>table>tbody>tr{
  display:grid;gap:3px 10px;margin:0 0 10px;padding:10px 12px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:12px}
html.mob #main .wrap>table>tbody>tr:hover{background:var(--card)}
html.mob #main .wrap>table>tbody>tr>td{
  display:block;min-width:0;max-width:none;width:auto;padding:0!important;border:0!important;
  text-align:left;white-space:normal;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
html.mob #main td[data-l]::before{
  content:attr(data-l);display:block;margin-bottom:1px;color:var(--dim);
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  overflow-wrap:normal;word-break:normal}
/* короткие значения: подпись в одну строку со значением */
html.mob #main td.cat::before,html.mob #main td.tot::before,html.mob #main td.upd::before,html.mob #main td.chans::before{
  content:attr(data-l) ":";display:inline;margin:0 5px 0 0;font-size:12px;font-weight:400;text-transform:none;letter-spacing:0}
/* блоки показателей — столбиком: подпись слева, значение справа */
html.mob .kvr{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-top:1px solid var(--line)}
html.mob .kvr:first-child{border-top:0}
html.mob .kvr .kl{flex:none;max-width:55%;font-weight:600}
html.mob .kvr .kvv{min-width:0;text-align:right;overflow-wrap:anywhere}
html.mob .kvh{padding:3px 0;color:var(--dim);font-style:italic}
html.mob .kvh.kvt{font-style:normal;color:inherit;padding:2px 0 6px;font-size:14px}
html.mob #main td.sum,html.mob #main td.pub{margin-top:2px}
html.mob #main td.sum .kvh{font-size:12px;padding-bottom:4px}
html.mob #main td.num,html.mob #main td.pub{white-space:normal}
html.mob #main td.badgecell{min-width:0;text-align:left}
html.mob #main .chgLabel{display:inline-block;margin:0 4px 2px 0;max-width:none;font-size:10px}

/* карточка канала / категории */
html.mob #main tr[data-ch],html.mob #main tr[data-cati]{grid-template-columns:auto minmax(0,1fr) auto}
html.mob #main tr[data-ch]>td,html.mob #main tr[data-cati]>td{grid-column:1/-1}
html.mob #main tr[data-ch]>td.idx,html.mob #main tr[data-cati]>td.idx{
  grid-column:1;grid-row:1;align-self:center;color:var(--dim);font-size:12px;width:auto;text-align:left}
html.mob #main tr[data-ch]>td.nm,html.mob #main tr[data-cati]>td.nm{
  grid-column:2;grid-row:1;align-self:center;font-size:15px;font-weight:600;line-height:1.25}
html.mob #main tr[data-ch]>td.badgecell,html.mob #main tr[data-cati]>td.badgecell{
  grid-column:3;grid-row:1;justify-self:end;max-width:46vw}
html.mob #main tr[data-ch]>td.cat{grid-column:1/3}
html.mob #main tr[data-ch]>td.tot{grid-column:3;text-align:right}
html.mob #main tr[data-ch]>td.upd{grid-column:1/3}
html.mob #main tr[data-ch]>td.act{grid-column:3;justify-self:end;align-self:end}
html.mob #main td.sum{font-size:12.5px}

/* карточка видео (список роликов канала) и избранного */
html.mob #main tr[data-vid],html.mob #main tr.favrow{grid-template-columns:96px repeat(3,minmax(0,1fr))}
html.mob #main tr[data-vid]>td,html.mob #main tr.favrow>td{grid-column:1/-1}
html.mob #main tr[data-vid]>td.idx,html.mob #main tr.favrow>td.idx{display:none}
html.mob #main tr[data-vid]>td.thbox,html.mob #main tr.favrow>td.thbox{grid-column:1;grid-row:1/span 2;width:auto}
html.mob #main td.thbox .th{width:96px;height:54px;border-radius:6px}
html.mob #main tr[data-vid]>td.vtitle,html.mob #main tr.favrow>td.vtitle{
  grid-column:2/-1;grid-row:1;max-width:none;font-size:14px;line-height:1.3;
  overflow:visible}
html.mob #main tr[data-vid]>td.badgecell{grid-column:2/-1;grid-row:2;justify-self:start;align-self:start;max-width:none}
html.mob #main tr.favrow>td.favch{grid-column:2/-1;grid-row:2;color:var(--dim);font-size:12px}
html.mob #main tr.nth>td.vtitle,html.mob #main tr.nth>td.badgecell,html.mob #main tr.nth>td.favch{grid-column:1/-1}
html.mob #main tr.nth>td.vtitle{grid-row:1}
html.mob #main tr.nth>td.badgecell,html.mob #main tr.nth>td.favch{grid-row:2}
html.mob #main tr[data-vid]>td.mv{grid-column:1/3}
html.mob #main tr[data-vid]>td.me{grid-column:3}
html.mob #main tr[data-vid]>td.ms{grid-column:4}
html.mob #main tr[data-vid]>td.md{grid-column:1/3}
html.mob #main tr[data-vid]>td.mu{grid-column:3/-1}
html.mob #main tr.favrow>td.mv{grid-column:1/3}
html.mob #main tr.favrow>td.ml{grid-column:3}
html.mob #main tr.favrow>td.mc{grid-column:4}
html.mob #main tr.favrow>td.me{grid-column:1/3}
html.mob #main tr.favrow>td.md{grid-column:3/-1}

/* ---------- шапка канала, вкладки типов видео ---------- */
html.mob .chead{padding:12px}
html.mob .chead h2{font-size:17px}
html.mob .chead .cstat{clear:both;margin-top:8px;font-size:13px}
html.mob .chead .cstat:first-of-type{margin-top:6px}
html.mob .chead .avatar,html.mob .chead .ava-none{width:64px;height:64px;margin:0 12px 6px 0;font-size:26px}
html.mob .subtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
html.mob .subtabs::-webkit-scrollbar{display:none}
html.mob .subtabs button{white-space:nowrap;flex:none}
html.mob .hint{font-size:11.5px}

/* ---------- фильтры: свёрнуты под одну кнопку ---------- */
html.mob .bar .barToggle{display:block;width:100%;margin:0;text-align:left;font-size:13px;padding:9px 12px}
html.mob .bar .barBody{display:none;flex-wrap:wrap;gap:6px 8px;align-items:center;width:100%;margin-top:8px}
html.mob .bar.open .barBody{display:flex}
html.mob .bar .barBody>label{flex:1 0 100%;margin:4px 0 -2px;font-size:11px}
html.mob .bar .barBody select,html.mob .bar .barBody input[type=date]{flex:1 0 100%;width:100%;font-size:16px;padding:9px 10px;min-height:42px}
html.mob .bar .barBody .mcwrap{flex:1 0 100%}

/* ---------- итоги: главная строка видна, остальное — по нажатию ---------- */
html.mob .totals{font-size:13px;line-height:1.45}
html.mob .totals .totToggle{display:block;margin:8px 0 0;padding:6px 10px;font-size:12px}
html.mob .totals .totMore{display:none;margin-top:4px}
html.mob .totals .totMore.open{display:block}

/* ---------- панель выбора ---------- */
html.mob .selbar{gap:6px}
html.mob .selbar .btn{margin:0}

/* ---------- окна: «шторка» снизу на всю ширину ---------- */
html.mob .modal{padding:0;align-items:flex-end}
html.mob .mbox,html.mob .dlg,html.mob .dlg.wide{
  max-width:none;width:100%;max-height:92vh;max-height:92dvh;
  border-radius:16px 16px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
html.mob .mbox .wrap{overflow:auto}
html.mob .mbox table{font-size:12px}
html.mob .mbox canvas{height:220px}
html.mob .mbottom button{width:100%;padding:12px}
html.mob .tip{max-width:86vw}

/* крупные цели нажатия */
html.mob .btn,html.mob .back{min-height:36px}
html.mob select,html.mob input[type=search],html.mob input[type=text],html.mob input[type=date]{font-size:16px}

/* ---------- карточка видео: название и «Просмотры» выглядят как кнопки ---------- */
html.mob #main tr[data-vid]>td.vtitle{
  position:relative;padding:9px 30px 9px 12px!important;border:1px solid var(--accent,var(--acc))!important;border-radius:10px;
  background:var(--card);background:color-mix(in srgb,var(--accent,var(--acc)) 9%,var(--card));
  color:var(--accent,var(--acc));font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
html.mob #main tr[data-vid]>td.vtitle::after{
  content:"›";position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;font-weight:400}
html.mob #main tr[data-vid]>td.mv{
  position:relative;padding:7px 30px 7px 12px!important;border:1px solid var(--line)!important;border-radius:10px;
  background:var(--card);background:color-mix(in srgb,var(--accent,var(--acc)) 6%,var(--card));
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
html.mob #main tr[data-vid]>td.mv::after{
  content:"📊";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:15px}
html.mob #main tr[data-vid]>td.vtitle:active,html.mob #main tr[data-vid]>td.mv:active{filter:brightness(.93)}