/*
 * Единый живой каркас всех уроков, работ и готовых материалов.
 * Разметку создаёт includes/material-page-template.php. Изменения внешнего
 * вида каркаса вносятся только здесь, чтобы они применялись ко всем типам.
 */
.work-theory-page{
  box-sizing:border-box;
  width:100%;
  max-width:var(--site-width,1304px)!important;
  margin:0 auto;
}

/* Shared outer spacing for authored works and registry-backed works. */
.custom-work.work-theory-page{padding:22px 0 48px}
@media(max-width:600px){.custom-work.work-theory-page{padding:12px}}

/* Игры используют тот же заголовок материалов, а их собственное поле всегда
   остаётся одной широкой колонкой. Игровые компоненты внутри не меняются. */
.game-material-page{
  box-sizing:border-box;
  display:flex!important;
  width:min(var(--site-width,1304px),calc(100% - 32px))!important;
  max-width:var(--site-width,1304px)!important;
  margin:0 auto!important;
  padding:22px 0 72px!important;
  flex-direction:column;
  gap:18px;
}
.game-material-page > [data-material-page-template]{width:100%;margin:0}
.game-material-page > .paint-task-card,
.game-material-page > .field-nav,
.game-material-page > .preview-title,
.game-material-page > .partBlock{
  margin-top:0!important;
  margin-bottom:0!important;
}

.work-theory-chrome{
  overflow:hidden;
  border:1px solid #dfe6ef;
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 34px rgba(35,51,75,.08);
}

.work-theory-chrome + .account-panel{margin-top:16px}

.work-theory-title-band{padding:15px 18px;background:#edf5ff}
.work-theory-title{
  margin:0;
  color:#141414;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:24px;
  font-weight:850;
  line-height:1.2;
}
.work-theory-subtitle{margin:6px 0 0;color:#5d6470;font-size:14px;line-height:1.45}

.work-theory-commandbar{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 18px;
  border-top:1px solid #dfe6ef;
  background:#fff;
}
.work-theory-commandbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto}
.work-theory-action{
  box-sizing:border-box;
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid #d9e2ee;
  border-radius:10px;
  background:#fff;
  color:#315f94;
  font:inherit;
  font-size:14px;
  font-weight:750;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}
.work-theory-action:hover{border-color:#b9c9dc;background:#f7f9fc;color:#284f7d}
.work-theory-action.is-quiet{border-color:transparent;background:transparent}
.work-theory-action.is-quiet:hover{background:#edf5ff}
.work-theory-action.is-primary{border-color:#315f94;background:#315f94;color:#fff}
.work-theory-action.is-primary:hover{border-color:#284f7d;background:#284f7d;color:#fff}
.work-theory-action.is-status{border-color:#b9ddc8;background:#edf8f1;color:#287252}
.work-theory-action.is-pending{border-color:#ecd58d;background:#fff8df;color:#8a6414}
.work-theory-action.is-previous{border-color:#d5deea;background:#f5f7fa;color:#607089}
.work-theory-action:disabled{opacity:1;cursor:default}

.work-theory-summary{padding:13px 18px 15px;border-top:1px solid #dfe6ef;background:#fff}
.work-theory-summary-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px 300px;
  overflow:hidden;
  border:1px solid #d6e1ec;
  border-radius:11px;
  background:#f7faff;
}
.work-theory-progress{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:13px 15px}
.work-theory-progress-copy{display:flex;justify-content:space-between;gap:15px;margin-bottom:8px;color:#61758b;font-size:13px;line-height:1.25}
.work-theory-progress-copy strong{color:#284f77;font-weight:750}
.work-theory-progress-track{height:8px;overflow:hidden;border-radius:999px;background:#e4eaf0}
.work-theory-progress-fill{height:100%;width:0;border-radius:inherit;background:#4f82b5;transition:width .2s ease}
.work-theory-summary-cell{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-left:1px solid #d6e1ec}
.work-theory-summary-label{display:grid;gap:4px;color:#63788d;font-size:13px;line-height:1.25}
.work-theory-summary-label strong{color:#284f77;font-weight:750}
.work-theory-summary-value{color:#244e77;font-weight:800;white-space:nowrap}
.work-theory-completion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-content:center}
.work-theory-completion span{color:#63788d;font-size:13px;white-space:nowrap}
.work-theory-completion strong{color:#284f77;font-size:13px;font-weight:750;text-align:right;white-space:nowrap}

/* Все готовые материалы выводят этот каркас напрямую из PHP-шаблона. */
.wrap.has-material-page-template,
.trainer-wrap.has-material-page-template{
  box-sizing:border-box;
  width:100%;
  max-width:var(--site-width,1304px)!important;
  margin:0 auto;
}
.ready-material-template{margin-bottom:18px}
.material-page-live-counters{display:none!important}

.has-material-page-template .card .status{
  display:block!important;
  width:13px!important;
  height:13px!important;
  padding:0!important;
  flex:0 0 13px!important;
  align-self:flex-start!important;
  margin-top:5px!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:50%!important;
  background:#d1d5db!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
}
.has-material-page-template .card .status b{display:none!important}
.has-material-page-template .card .status.good{background:var(--good,#16a34a)!important}
.has-material-page-template .card .status.bad{background:var(--bad,#dc2626)!important}
.has-material-page-template .card .status.neutral{background:#d1d5db!important}

@media(max-width:1100px) and (min-width:761px){
  .work-theory-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-theory-progress{grid-column:1 / -1;border-bottom:1px solid #d6e1ec}
  .work-theory-summary-cell:first-of-type{border-left:0}
}

@media(max-width:760px){
  .work-theory-summary-grid{grid-template-columns:1fr}
  .work-theory-summary-cell{border-top:1px solid #d6e1ec;border-left:0}
  .work-theory-commandbar{
    box-sizing:border-box;
    min-height:0;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:start;
    gap:6px;
  }
  .work-theory-commandbar-actions > .work-theory-action.is-status{
    flex:0 1 auto;
    gap:5px;
    padding:6px 8px;
    font-size:12px;
    line-height:1.25;
  }
  .work-theory-commandbar > .work-theory-action{
    box-sizing:border-box;
    width:44px;
    min-height:44px;
    padding:8px;
  }
  .work-theory-commandbar-actions{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    min-width:0;
    gap:6px;
    margin-left:0;
  }
  .work-theory-commandbar-actions > :is(a,button){
    box-sizing:border-box;
    width:auto!important;
    max-width:100%;
    min-width:0!important;
    min-height:44px;
    margin:0!important;
    justify-content:center;
    padding:9px 8px;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
  }
  .game-material-page .work-theory-commandbar-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr)) 44px;
    align-items:stretch;
  }
  .game-material-page .work-theory-commandbar-actions > :is(a,button){
    width:100%!important;
    min-height:40px;
    padding:7px 6px;
    line-height:1.15;
  }
  .game-material-page .work-theory-commandbar-actions > [data-material-compact="reset"]{
    grid-column:3;
    grid-row:1;
    width:44px!important;
    justify-self:end;
  }
  .game-material-page .work-theory-commandbar-actions > [data-material-mobile-wide]{
    grid-column:1 / 3;
  }
  /* Keep the original labels in the DOM; only compact their visual display.
     Stable selectors also cover controls supplied via actions_html. */
  .work-theory-commandbar :is([data-history-back],[data-material-compact],.printPdfBtn,#resetProgressBtn,#resetAll,#resetBtn,#resetCustomMaterial,[data-reset-theory-lesson],[data-oge-variant-reset],[data-exposition-reset]){
    font-size:0!important;
    gap:0;
    flex:0 0 auto;
    min-width:44px!important;
  }
  .work-theory-commandbar :is([data-material-compact],.printPdfBtn,#resetProgressBtn,#resetAll,#resetBtn,#resetCustomMaterial,[data-reset-theory-lesson],[data-oge-variant-reset],[data-exposition-reset]) > span[aria-hidden="true"]{display:none}
  .work-theory-commandbar [data-history-back]::before{content:"←";font-size:22px;line-height:1}
  .work-theory-commandbar :is([data-material-compact="reset"],#resetProgressBtn,#resetAll,#resetBtn,#resetCustomMaterial,[data-reset-theory-lesson],[data-oge-variant-reset],[data-exposition-reset])::before{content:"↻";font-size:24px;line-height:1}
  .work-theory-commandbar :is([data-material-compact="pdf"],.printPdfBtn)::before{content:"PDF";font-size:13px;line-height:1.3}
}

@media(max-width:620px){
  .work-theory-title-band{padding:14px}
  .work-theory-title{font-size:22px;overflow-wrap:anywhere}
  .work-theory-commandbar,.work-theory-summary{padding-left:14px;padding-right:14px}
  .work-theory-commandbar-actions > :is(a,button):not(.is-status){font-size:13px}
  .game-material-page .work-theory-commandbar-actions > :is(a,button):not(.is-status){font-size:12px}
  .game-material-page .work-theory-commandbar-actions:has(> [data-game-print-icon]){
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  [data-game-print-icon]{
    box-sizing:border-box;
    width:44px!important;
    min-width:44px!important;
    min-height:40px;
    padding:8px!important;
    font-size:0!important;
    line-height:1;
    justify-self:start;
  }
  [data-game-print-icon]::before{
    content:"";
    display:block;
    width:21px;
    height:21px;
    margin:auto;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect width='12' height='8' x='6' y='14'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect width='12' height='8' x='6' y='14'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .game-material-page{width:calc(100% - 20px)!important;padding-top:18px!important;gap:14px}
}

@media print{
  .work-theory-commandbar{display:none!important}
  .work-theory-page{max-width:none!important}
  .work-theory-chrome{border-radius:0;box-shadow:none}
  .game-material-page{display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  .game-material-page > [data-material-page-template]{display:none!important}
}