/* ============================================================
   Тренерграм · mvp-strava · компоненты для страниц, которых нет
   в showcase/01-strava (там есть только конструктор). Продолжает
   ту же плоскую тему: ни карточек, ни теней — раздел тоном
   и линией, переменные из assets/theme-01-strava.css.
   Подключается ПОСЛЕ base-trainer.css и theme-01-strava.css.
   ============================================================ */

.pagewrap{max-width:1180px;margin:0 auto;padding:18px 22px 70px}
.pagewrap.narrow{max-width:900px}

/* .btn/.iact в base-trainer.css рассчитаны на <button> — на страницах,
   которых нет в конструкторе, те же классы вешаются и на <a>, поэтому
   явно убираем подчёркивание ссылки здесь, не трогая base-trainer.css. */
.btn, .iact, .folder, .tcard, .excard, .card, .mapcard, .nav a, .nfoot{text-decoration:none}
.mapcard:hover{background:var(--s1)}
.card > svg, .empty > svg{width:22px;height:22px;stroke-width:1.6;color:var(--tx3)}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){ .cols4{grid-template-columns:repeat(2,1fr)} .cols3{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .cols2,.cols3,.cols4{grid-template-columns:1fr} }

.sechead{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.sechead:first-child{margin-top:0}
.sechead .t{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:-.02em}
.sechead .ln{flex:1;height:1px;background:var(--line)}
.sechead .n{font-size:12px;color:var(--tx4);font-weight:600}

.card{background:var(--bg);border-radius:var(--rad-l)}
.card .ch, .card.ch{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card .ch .t, .card.ch .t{flex:1;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.card .cb, .card.cb{padding:15px 16px}
.card .cb.flush, .card.cb.flush{padding:0}

.kpi{background:var(--bg);border-radius:var(--rad-l);padding:14px 16px}
.kpi .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);display:flex;align-items:center;gap:6px}
.kpi .k svg{width:13px;height:13px;flex:none;stroke-width:1.6}
.kpi .v{font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:-.03em;margin:7px 0 2px;line-height:1.1}
.kpi .v.acc{color:var(--acc)} .kpi .v.warn{color:var(--warn)} .kpi .v.rm{color:var(--rm)}
.kpi .d{font-size:12px;color:var(--tx3)}

.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx4);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
.tbl tbody tr.click{cursor:pointer;transition:.1s}
.tbl tbody tr.click:hover{background:var(--s2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.cellname{display:flex;align-items:center;gap:10px;min-width:0}
.cellname .n{font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cellname .s{font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--rad-s);
  background:var(--s1);font-size:11px;font-weight:500;color:var(--tx2);white-space:nowrap}
.chip.acc{background:var(--acc-a);color:var(--acc-d)}
.chip.ok{background:var(--ok-a);color:var(--ok)}
.chip.warn{background:#FBF1DE;color:var(--warn)}
.chip.rm{background:var(--rm-a);color:var(--rm)}
.chip.ghost{background:none;color:var(--tx3)}

.av{border-radius:50%;background:var(--s1);display:grid;place-items:center;font-weight:700;color:var(--tx3);flex:none}
.av.s{width:26px;height:26px;font-size:10px}
.av.m{width:34px;height:34px;font-size:12px}
.av.l{width:48px;height:48px;font-size:15px}
.av.xl{width:66px;height:66px;font-size:20px}
.av svg{width:52%;height:52%;stroke-width:1.6}

.bar{height:5px;border-radius:3px;background:var(--s1);overflow:hidden;flex:none}
.bar i{display:block;height:100%;border-radius:3px;background:var(--acc)}
.bar i.warn{background:var(--warn)}

.hint{font-size:11.5px;color:var(--tx4);line-height:1.5;margin-top:10px;padding-left:10px;border-left:2px solid var(--line2)}
.hint b{color:var(--tx3);font-weight:600}

.empty{border:1.5px dashed var(--line2);border-radius:var(--rad-l);padding:36px;text-align:center}
.empty .t{font-size:14.5px;font-weight:600;color:var(--tx1)}
.empty .d{font-size:12.5px;color:var(--tx4);margin:5px 0 14px}

.search{display:flex;align-items:center;gap:8px;background:var(--s1);border-radius:var(--rad-m);
  padding:0 11px;height:34px;border:1.5px solid transparent}
.search:focus-within{border-color:var(--acc);background:var(--bg)}
.search svg{width:14px;height:14px;color:var(--tx4);flex:none}
.search input{flex:1;min-width:0;font-size:13px}
.search input:focus{outline:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{height:26px;padding:0 11px;border-radius:20px;font-size:12px;color:var(--tx3);background:var(--s1);font-weight:500}
.filters button:hover{color:var(--tx1)}
.filters button.on{background:var(--acc);color:var(--on-acc);font-weight:600}

/* ─── дашборд / ленты ─── */
.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0}
.fitem .c{flex:1;min-width:0}
.fitem .h{display:flex;align-items:baseline;gap:8px}
.fitem .h b{font-size:13px;font-weight:600}
.fitem .h time{font-size:11px;color:var(--tx4);margin-left:auto;white-space:nowrap}
.fitem .tx{font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.5}
.reply{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px 10px;border-radius:var(--rad-m);background:var(--s2)}
.reply input{flex:1;min-width:0;font-size:12.5px}

/* ─── карточка клиента (профиль) ─── */
.prohead{display:flex;align-items:flex-start;gap:18px;padding:18px;background:var(--bg);border-radius:var(--rad-l)}
.prohead .nm{font-family:var(--disp);font-size:24px;font-weight:700;letter-spacing:-.02em}
.prohead .mt{font-size:12.5px;color:var(--tx3);margin-top:5px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1px;background:var(--line);
  border-radius:var(--rad-m);overflow:hidden}
.fact{background:var(--bg);padding:10px 12px}
.fact .k{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx4)}
.fact .v{font-family:var(--disp);font-size:15px;margin-top:3px}
.fact .v small{font-size:10.5px;color:var(--tx4);margin-left:2px;font-family:var(--ui);font-weight:500}
.chartbox{position:relative}
.chartbox svg{display:block;width:100%;height:auto;overflow:visible}
.chartbox .yl{font-size:10px;fill:var(--tx4)}
.pmpick{display:flex;gap:5px;flex-wrap:wrap}
.pmpick button{height:24px;padding:0 10px;border-radius:var(--rad-s);font-size:12px;color:var(--tx3);background:var(--s1);font-weight:500}
.pmpick button.on{background:var(--acc-a);color:var(--acc-d);font-weight:600}
.pmgrid{display:grid;grid-template-columns:1fr 72px;gap:9px;align-items:center}
.pmgrid .pn{font-size:12.5px;color:var(--tx2)}
.pmin{height:30px;text-align:right;padding:0 9px;border-radius:var(--rad-s);background:var(--s1);font-size:13px;width:100%;border:1.5px solid transparent}
.pmin:focus{outline:0;background:var(--acc-a);border-color:var(--acc)}

/* ─── база упражнений / шаблоны ─── */
.exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.excard{background:var(--bg);border-radius:var(--rad-m);padding:12px;cursor:pointer;transition:.13s;border:1.5px solid transparent}
.excard:hover{border-color:var(--line2)}
.excard .top{display:flex;gap:10px;align-items:flex-start}
.excard .nm{font-size:13.5px;font-weight:600;line-height:1.3}
.excard .en{font-size:11px;color:var(--tx4);margin-top:2px}
.excard .met{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}

.thumb{border-radius:var(--rad-m);flex:none;display:grid;place-items:center;font-size:10px;font-weight:700;
  color:var(--tx3);width:34px;height:34px;background:var(--s1)}
.thumb.pending{color:var(--tx4);border:1.5px dashed var(--line2);background:none}

.split{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}
.folders{display:flex;flex-direction:column;gap:1px}
.folder{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;border-radius:var(--rad-m);color:var(--tx2);
  font-size:13px;cursor:pointer}
.folder:hover{background:var(--s1);color:var(--tx1)}
.folder.on{background:var(--acc-a);color:var(--acc-d);font-weight:600}
.folder .n{flex:1;min-width:0}
.folder .c{font-size:11px;color:var(--tx4)}

.tcard{background:var(--bg);border-radius:var(--rad-m);padding:13px;cursor:pointer;transition:.13s;border:1.5px solid transparent}
.tcard:hover{border-color:var(--line2)}
.tcard .h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tcard .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.tcard .chip{flex:none}
.tcard .ls{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--tx3)}
.tcard .ls span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .foot{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--tx4)}
.tcard .foot svg{width:12px;height:12px;flex:none}
.tweek{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:9px}
.td{border-radius:var(--rad-s);padding:6px 6px 7px;font-size:10.5px;line-height:1.3;min-height:44px;
  background:var(--s1);color:var(--tx4)}
.td.on{background:var(--acc-a);color:var(--acc-d)}
.td i{font-style:normal;display:block;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}

/* ─── бренд ─── */
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:var(--rad-m);cursor:pointer;position:relative;border:1.5px solid var(--line)}
.sw.on:after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--acc);border-radius:calc(var(--rad-m) + 4px)}
.phone{width:216px;border-radius:24px;background:var(--ink);padding:10px;flex:none}
.phone .scr{border-radius:16px;overflow:hidden;background:var(--bg)}
.phone .cover{height:78px;position:relative;display:flex;align-items:flex-end;padding:10px}
.phone .cover .pav{width:36px;height:36px;border-radius:var(--rad-m);border:2px solid var(--bg);display:grid;place-items:center;font-size:12px;font-weight:700}
.phone .pb{padding:10px}
.phone .pn{font-size:13px;font-weight:700}
.phone .ps{font-size:10.5px;color:var(--tx4);margin-top:2px}
.phone .btnp{margin-top:10px;height:30px;border-radius:var(--rad-m);display:grid;place-items:center;font-size:11px;font-weight:700}
.copyfield{display:flex;align-items:center;gap:9px;height:36px;padding:0 6px 0 12px;border-radius:var(--rad-m);background:var(--s1)}
.copyfield code{flex:1;min-width:0;font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inp{height:34px;padding:0 11px;border-radius:var(--rad-m);background:var(--s1);font-size:13px;width:100%;border:1.5px solid transparent}
.inp:hover{background:var(--s2)}
.inp:focus{outline:0;background:var(--bg);border-color:var(--acc)}
select.inp{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235E5E5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:13px}
.formfld{display:flex;flex-direction:column;gap:6px}
.formfld .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3)}

/* ─── карта сайта ─── */
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.mapcard{background:var(--bg);border-radius:var(--rad-l);overflow:hidden}
.mapcard .mh2{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line)}
.mapcard .mh2 svg{width:16px;height:16px;color:var(--tx3);flex:none}
.mapcard .mh2 .n{flex:1;font-size:13px;font-weight:600;color:var(--tx1)}
.mapcard ul{list-style:none;padding:10px 14px 12px}
.mapcard li{display:flex;gap:8px;font-size:12px;color:var(--tx2);padding:3px 0;line-height:1.5}
.mapcard li:before{content:"";width:3px;height:3px;border-radius:50%;background:var(--tx4);margin-top:8px;flex:none}

/* ─── календарь ─── */
.cal{background:var(--bg);border-radius:var(--rad-l);overflow:hidden}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.calhead div{padding:9px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx4)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(106px,auto)}
.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;display:flex;
  flex-direction:column;gap:4px;min-width:0}
.cell:nth-child(7n){border-right:0}
.cell.out .cd{color:var(--tx4);opacity:.5}
.cell.today{background:var(--acc-a)}
.cell .cd{font-size:11.5px;color:var(--tx3)}
.cell.today .cd{color:var(--acc-d);font-weight:700}
.ev{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:var(--rad-s);background:var(--s1);
  font-size:11px;min-width:0;cursor:pointer}
.ev:hover{background:var(--s2)}
.ev .k{width:6px;height:6px;border-radius:50%;flex:none;background:var(--acc)}
.ev .k.warmup{background:#2B6FCC}
.ev .k.metcon{background:var(--rm)}
.ev .k.cooldown{background:#7C6FE0}
.ev .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2)}
.ev.done{opacity:.5}
.ev.rest{background:none;border:1.5px dashed var(--line2);color:var(--tx4)}
.calmore{font-size:10.5px;color:var(--tx4);padding-left:6px}
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:12px 4px 0;font-size:12px;color:var(--tx3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ─── таймлайн дня (дашборд) ───
   Единица строки — занятие, а не клиент: групповая тренировка на 25 человек
   остаётся одной строкой со стопкой аватаров. Визуальный язык прежний —
   плоскость: время слева, вертикальная спина, никаких карточек и теней. */
.tl{position:relative;padding:4px 0}
.tl .r{display:grid;grid-template-columns:52px 18px 1fr;align-items:start;gap:0;
  padding:10px 0;text-decoration:none;color:inherit}
.tl .r+.r{border-top:1px solid var(--line)}
.tl .tm{font:500 12px var(--mono);color:var(--tx3);font-variant-numeric:tabular-nums;
  padding-top:2px;white-space:nowrap}
.tl .sp{position:relative;height:100%;display:flex;justify-content:center}
/* Спина рисуется псевдоэлементом, а не отдельным узлом: линия должна идти
   сквозь всю строку, включая её отступы. */
.tl .sp::before{content:"";position:absolute;top:-10px;bottom:-10px;width:1px;background:var(--line)}
.tl .r:first-child .sp::before{top:8px}
.tl .r:last-child .sp::before{bottom:auto;height:16px}
.tl .dot{position:relative;width:9px;height:9px;border-radius:50%;margin-top:5px;
  background:var(--bg);border:2px solid var(--line2)}
.tl .r.done .dot{background:var(--ok);border-color:var(--ok)}
.tl .r.nores .dot{background:var(--bg);border-color:var(--warn)}
.tl .r.ahead .dot{background:var(--bg);border-color:var(--acc)}
.tl .bd{padding-left:12px;min-width:0}
.tl .t{font-size:13.5px;font-weight:600;color:var(--tx1);line-height:1.35}
.tl .r:hover .t{color:var(--acc)}
.tl .sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;
  font-size:12px;color:var(--tx3)}
.tl .who{display:flex;align-items:center;gap:6px;margin-top:8px}
/* Стопка аватаров: до трёх — с именами, дальше только счётчик, иначе строка
   разъедется на группе. */
.tl .stack{display:flex}
.tl .stack .av{margin-left:-6px;box-shadow:0 0 0 2px var(--bg)}
.tl .stack .av:first-child{margin-left:0}
.tl .nm{font-size:12px;color:var(--tx2)}
.tl .now{display:grid;grid-template-columns:52px 18px 1fr;align-items:center;
  padding:2px 0;pointer-events:none}
.tl .now .tm{color:var(--acc);font-weight:600}
.tl .now .sp{justify-content:center}
.tl .now .sp i{width:7px;height:7px;border-radius:50%;background:var(--acc);display:block}
.tl .now .ln{height:1px;background:var(--acc);opacity:.45;margin-left:12px}

/* ─── месяц-обзор ───
   В ячейке нет ни одной фамилии и ни одного названия тренировки. При
   полусотне клиентов список в дне нечитаем при любой единице: у персонального
   тренера все программы индивидуальные, и схлопывать по программе нечего.
   Месяц отвечает на свой вопрос — где дырки и где перегруз; имена уровнем
   ниже, на экране дня. */
.cell.pick{cursor:pointer}
.cell.pick:hover{background:var(--s2)}
.cell.today.pick:hover{background:var(--acc-p)}
.dfill{display:flex;height:4px;border-radius:2px;background:var(--s1);overflow:hidden;margin:2px 0 1px}
.dfill i{display:block;height:100%}
.dfill i.on{background:var(--acc)}
.dfill i.no{background:var(--line2)}
.dn{font-size:13px;font-weight:600;color:var(--tx1);letter-spacing:-.01em;line-height:1.3}
.ds{font-size:11px;color:var(--tx4);line-height:1.35}
.dg{font-size:11px;color:var(--warn);font-weight:600;line-height:1.35}
.cell .quiet{font-size:11px;color:var(--tx4);opacity:.7}
/* строка «не составлено» в таймлайне дня */
.tl .r.gap .dot{background:var(--bg);border-color:var(--warn);border-style:dashed}
.tl .r.gap .t{color:var(--warn)}

/* ─── неделя одним взглядом (дашборд) ───
   Та же логика, что в месяце-обзоре: состояние дня, а не его содержимое.
   Здесь она нужна на семь дней вперёд — чтобы дырку было видно до того,
   как клиент останется без тренировки. */
/* minmax(0,1fr), а не 1fr: колонки грида не сжимаются ниже min-content,
   и семь дней распирали левую колонку дашборда, выталкивая правую за экран. */
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wk a{display:block;padding:10px 9px;border-radius:var(--rad-m);background:var(--s2);
  text-decoration:none;color:inherit;min-width:0}
.wk a:hover{background:var(--s1)}
.wk a.today{background:var(--acc-a)}
.wk .d{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx4)}
.wk a.today .d{color:var(--acc-d)}
.wk .dt{display:block;font-size:11px;color:var(--tx4);margin-top:1px}
.wk .n{display:block;font-size:16px;font-weight:700;color:var(--tx1);letter-spacing:-.02em;margin-top:7px;line-height:1.1}
.wk .s{display:block;font-size:10.5px;color:var(--tx4);margin-top:2px}
.wk .g{display:block;font-size:10.5px;color:var(--warn);font-weight:600;margin-top:1px}
.wk .b{display:flex;height:3px;border-radius:2px;background:var(--s1);overflow:hidden;margin-top:7px}
.wk .b i{display:block;height:100%}
.wk .b i.on{background:var(--acc)}
.wk .b i.no{background:var(--line2)}

/* ─── очередь составления ─── */
.q{display:flex;flex-direction:column}
/* Чип запаса и кнопка — nowrap, поэтому строке нужен перенос: без него
   её min-content распирал колонку так же, как сетка недели. */
.q .r{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.q .r:last-child{border-bottom:0}
.q .r .c{flex:1 1 190px;min-width:0}
.q .r .t{display:block;font-size:13px;font-weight:600;color:var(--tx1);text-decoration:none}
.q .r .t:hover{color:var(--acc)}
.q .r .s{display:block;font-size:11.5px;color:var(--tx4);margin-top:3px}

/* ─── сортировка по столбцам ───
   Карточная сетка годится на десяток элементов. В базе упражнений их 31, у
   реального тренера будут сотни — тогда нужны столбцы, по которым можно
   отсортировать и сравнить, а не плитки, которые только листаются. */
.tbl th.srt{cursor:pointer;user-select:none}
.tbl th.srt:hover{color:var(--tx2)}
.tbl th.srt::after{content:"↕";margin-left:5px;opacity:.3;font-weight:400}
.tbl th.srt.up::after{content:"↑";opacity:1;color:var(--acc)}
.tbl th.srt.dn::after{content:"↓";opacity:1;color:var(--acc)}
.tbl td .sub{font-size:11.5px;color:var(--tx3);margin-top:2px}
.tbl td.num{font-family:var(--mono);font-size:12.5px;color:var(--tx2);font-variant-numeric:tabular-nums}
.tblwrap{overflow-x:auto}