/* 08.10.2026: прогресс учеников школы наглядно (school-progress.js). */
.sp-prog{display:grid;gap:6px;min-width:0}
.sp-ptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:20px}
.sp-pct{font-size:1rem;font-weight:800;color:var(--text)}
.sp-flag{border-radius:999px;padding:1px 9px;font-size:.75rem;font-weight:700;background:var(--warn-bg,#fff3d6);color:var(--warn-text,#8a5a12)}
.sp-delta{border-radius:999px;padding:1px 9px;font-size:.75rem;font-weight:700;background:var(--ok-bg,#e8f3e6);color:var(--ok-text,#2f6b2a)}
.sp-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sp-metric{display:grid;gap:3px;min-width:0}
.sp-mlabel{display:flex;justify-content:space-between;gap:4px;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden}
.sp-mlabel b{color:var(--text);font-weight:600}
.sp-track{height:6px;border-radius:3px;background:var(--surface-3,#eee);overflow:hidden}
.sp-track i{display:block;height:100%;border-radius:3px;background:var(--bar-main,var(--brand,#501122));transition:width .5s ease}
.sp-workbook .sp-track i{background:var(--school,#f2c45f)}
.sp-exam .sp-track i{background:var(--success,#3d7a3a)}
.sp-when,.sp-none{color:var(--muted);font-size:.78rem}
.sp-none{display:block}
.sp-err{display:block;color:var(--danger,#9b1b3a);font-size:.78rem}
.sp-stale .sp-pct{color:var(--warn-text,#8a5a12)}
.sp-loading .sp-cell{opacity:.45;pointer-events:none}
.sp-loading .sp-cell::after{content:"Обновляем…";display:block;font-size:.78rem;color:var(--muted)}
@keyframes sp-flash{from{background:var(--ok-bg,#e8f3e6)}to{background:transparent}}
.sp-flash{animation:sp-flash 1.6s ease-out;border-radius:8px}
.sp-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;background:var(--card);border-radius:16px;padding:14px 20px;margin:0 0 14px}
.sp-summary>div{display:grid;gap:1px}
.sp-summary>div b{font-size:1.25rem;font-weight:800}
.sp-summary>div span{color:var(--muted);font-size:.8rem}
.sp-summary .sp-warn b{color:var(--warn-text,#8a5a12)}
.sp-summary .sp-sactions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sp-only-stale .ss-body .ss-tr:not(.sp-row-stale){display:none}
.sp-card{margin:12px 0}
.sp-card .sp-prog{gap:10px}
.sp-card .sp-metrics{gap:14px}
.sp-card .sp-mlabel{font-size:.82rem}
.sp-card .sp-track{height:8px}
:root[data-theme="dark"] .sp-delta{color:#9fd59a}
@media(max-width:700px){
  .sp-metrics{gap:6px}
  .sp-summary{padding:12px 14px;gap:8px 18px}
  .sp-summary .sp-sactions{margin-left:0;width:100%}
}
:root[data-ui="simple"] .ss-table.sp-table .ss-tr{grid-template-columns:36px minmax(0,1.25fr) 130px minmax(0,2.1fr) 220px!important}
@media(max-width:700px){:root[data-ui="simple"] .ss-table.sp-table .ss-tr{grid-template-columns:28px minmax(0,1fr)!important}}
.scm-progress.sp-loading .sp-card{opacity:.45}
@media(max-width:700px){
  .sp-metrics{grid-template-columns:1fr;gap:5px}
  .sp-metric{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px}
}

/* 16.10.2026 (пользователь: «интерфейс Школы кривоват, съезжает и на ПК, и на телефоне»): имена не обрезаются,
   кнопки не налезают на прогресс (колонка действий по ширине кнопок), три полосы прогресса — в строку на ПК. */
:root[data-ui="simple"] .ss-table.sp-table .ss-tr{grid-template-columns:36px minmax(170px,1.1fr) 150px minmax(0,2fr) 210px!important;column-gap:16px}
@media(min-width:701px){
  :root[data-ui="simple"] .ss-table.sp-table .ss-refresh-btn{font-size:0!important;width:42px;min-width:42px;padding:0!important;display:inline-grid;place-items:center}
  :root[data-ui="simple"] .ss-table.sp-table .ss-refresh-btn>*{display:none!important}
  :root[data-ui="simple"] .ss-table.sp-table .ss-refresh-btn::before{content:"↻";font-size:18px;line-height:1}
}
:root[data-ui="simple"] .ss-table.sp-table .sp-when{white-space:normal}
:root[data-ui="simple"] .ss-table.sp-table .ss-name b{white-space:normal;overflow:visible;text-overflow:clip}
:root[data-ui="simple"] .ss-table.sp-table .ss-name{gap:2px}
:root[data-ui="simple"] .ss-name .ss-sub{color:var(--muted);font-size:.78rem;line-height:1.3}
:root[data-ui="simple"] .ss-table.sp-table .ss-act{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:nowrap}
:root[data-ui="simple"] .ss-table.sp-table .sp-cell{min-width:0;overflow:hidden}
:root[data-ui="simple"] .ss-table.sp-table .ss-status{white-space:normal;line-height:1.25}
:root[data-ui="simple"][data-theme="dark"] .ss-status.ss-study{background:rgba(120,190,120,.16);color:#9fd59a}
@media(max-width:700px){
  :root[data-ui="simple"] .ss-table.sp-table .ss-tr{grid-template-columns:28px minmax(0,1fr)!important;column-gap:10px;row-gap:8px}
  :root[data-ui="simple"] .ss-table.sp-table .ss-tr>*:not(.ss-check){grid-column:2}
  :root[data-ui="simple"] .ss-table.sp-table .ss-th>*:not(.ss-check):not(:nth-child(2)){display:none}
  :root[data-ui="simple"] .ss-table.sp-table .ss-act{justify-content:flex-start;flex-wrap:wrap}
}
/* 16.10.2026: телефон — «Школа» начиналась с полутора экранов кнопок. Вкладки и фильтры — одной строкой
   с прокруткой внутри (страница не уезжает вбок), кнопки сверху и в сводке — компактно в ряд. */
@media(max-width:700px){
  #view:has(.sp-table) .ss-pagebar{display:flex!important;flex-wrap:nowrap;gap:8px;justify-content:stretch}
  #view:has(.sp-table) .ss-pagebar>.button{flex:1 1 0;min-width:0;min-height:40px;padding:8px 10px;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #view:has(.sp-table) .ss-tabs,#view:has(.sp-table) .ss-chips{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  #view:has(.sp-table) .ss-tabs::-webkit-scrollbar,#view:has(.sp-table) .ss-chips::-webkit-scrollbar{display:none}
  #view:has(.sp-table) .ss-tabs>button,#view:has(.sp-table) .ss-chips>button{flex:0 0 auto;white-space:nowrap}
  #view:has(.sp-table) .sp-summary .sp-sactions{flex-wrap:nowrap}
  #view:has(.sp-table) .sp-summary .sp-sactions .button{flex:1 1 0;min-width:0;min-height:38px;padding:6px 8px;font-size:.84rem;white-space:normal;line-height:1.2}
}