/* UI-кит платформы «Бизбаза». Шаг 4, 30.10.2026. Все числа из tokens.css, новых нет.
   Структура экранов из wireframes-mvp (D43). Этот файл один к одному уходит в код (React + Tailwind 4: классы заменяются компонентами, значения остаются в токенах). */

*{box-sizing:border-box}
html{font-family:var(--font-text);font-size:var(--text-size);line-height:var(--text-leading);color:var(--ink);background:var(--ground) fixed;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
body{margin:0;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;text-decoration-color:var(--rule-strong);transition:text-decoration-color var(--t-hover) var(--ease)}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
p{margin:0 0 var(--para-gap);max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 var(--para-gap);padding-left:1.3em;max-width:var(--measure)}
li+li{margin-top:var(--list-gap)}
h1,h2,h3{line-height:var(--leading-head);margin:0;text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:var(--size-big);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);margin-bottom:calc(var(--line) * .6)}
h2{font-size:var(--size-mid);font-weight:var(--weight-semibold);letter-spacing:-.01em;margin-bottom:var(--h2-after)}
h3{font-size:var(--size-text);font-weight:var(--weight-bold);margin-bottom:calc(var(--line) * .25)}
strong{font-weight:var(--weight-semibold)}
.muted{color:var(--ink-muted)}
.hidden,[hidden]{display:none!important}
svg.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Появление содержимого */
@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.main>*{animation:appear var(--t-appear) var(--ease) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Лента состояния показа (вне продукта) */
.strip{min-height:36px;background:var(--tint);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px var(--page-side);flex-wrap:wrap}
.strip a{min-height:32px;display:inline-flex;align-items:center}

/* Каркас: боковая панель и основная область */
.frame{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 36px)}
.side{background:var(--side-bg);color:var(--side-ink);border-right:1px solid var(--rule);padding:var(--page-top) 14px var(--page-bottom);display:flex;flex-direction:column;gap:var(--line)}
.brand{display:flex;gap:10px;align-items:center;padding:0 10px;color:inherit;text-decoration:none}
.brand svg{display:block;height:24px;width:auto}
.role-note{padding:10px 12px 12px;background:var(--side-note-bg);border-radius:var(--r-field);color:var(--side-note-ink)}
.role-note p{margin:0}
.nav{display:grid;gap:4px}
.nav a{display:flex;gap:10px;align-items:center;text-decoration:none;padding:0 12px;min-height:var(--control-height);border-radius:var(--r-control);font-weight:var(--weight-medium);transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.nav a:hover{background:var(--side-note-bg)}
.nav a:active{background:var(--tint);color:var(--ink)}
.nav a[aria-current=page]{background:var(--action-bg);color:var(--action-ink)}
.side-bottom{margin-top:auto}
.top{min-height:64px;padding:10px var(--page-side);background:transparent;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:16px}
.crumb{color:var(--ink-muted)}
.user{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;flex:none;border-radius:50%;background:var(--action-bg);color:var(--action-ink);display:grid;place-items:center;font-weight:var(--weight-semibold)}
.main{padding:var(--page-top) var(--page-side) var(--page-bottom);max-width:1160px;min-width:0}
.main.narrow{max-width:720px}
.page-head{margin-bottom:var(--module-gap)}
.page-head p{color:var(--ink-muted)}
.eyebrow{color:var(--ink-muted);margin-bottom:calc(var(--line) * .3)}
.mobile-nav{display:none}

/* Разделы и карточки */
.section+.section{margin-top:var(--section-gap)}
.cards{display:grid;gap:var(--card-gap)}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--card-gap);align-items:start}
aside>.card+.card,aside>form+.card,aside>.card+form,.stack>.card+.card{margin-top:var(--card-gap)}
.card{background:var(--sheet);border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--shadow-rest);padding:var(--box-top) var(--box-right) var(--box-bottom) var(--box-left);min-width:0}
.card.soft{background:var(--card);border-color:transparent;box-shadow:none}
.card.lead{background:var(--highlight-glass);border-color:transparent;color:var(--highlight-ink)}
.card.lead .eyebrow,.card.lead .muted{color:var(--highlight-ink)}
.card.lead .msg{background:rgba(255,255,255,.72);border-color:transparent;backdrop-filter:blur(8px)}
.card.lead .msg .meta{color:var(--ink-muted)}
.card.lead .btn:not(.primary){background:rgba(255,255,255,.72);border-color:transparent}
.card>h2:first-child,.card>h3:first-child,.card>.eyebrow:first-child{margin-top:0}
.card h2+p,.card h3+p{margin-top:0}
.rows{display:grid}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--line) var(--line);align-items:center;padding:calc(var(--line) * .7) 0;border-bottom:1px solid var(--rule)}
.row:first-child{padding-top:0}
.row:last-child{border-bottom:0;padding-bottom:0}
.row p{margin:calc(var(--line) * .15) 0 0;color:var(--ink-muted)}
.row>div{min-width:0}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:calc(var(--line) * .3) var(--line)}
.kv dt{color:var(--ink-muted)}
.kv dd{margin:0}
.number{font-size:var(--size-mid);font-weight:var(--weight-semibold);line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.divider{height:1px;background:var(--rule);margin:var(--line) 0 calc(var(--line) * 1.3)}
.notice{padding:calc(var(--line) * .5) var(--box-right) calc(var(--line) * .8) calc(var(--line) * .8);border-left:3px solid var(--highlight);background:var(--sheet);border-radius:0 var(--r-field) var(--r-field) 0;margin:var(--line) 0;box-shadow:var(--shadow-rest)}
.notice p{margin:0}
.empty{padding:calc(var(--line) * 1.4) calc(var(--line) * 1.2) calc(var(--line) * 2);text-align:center;border:1px dashed var(--rule-strong);border-radius:var(--r-card);color:var(--ink-muted)}
.empty p{margin-inline:auto}

/* Бейджи и статусы: один размер текста, вес и серый */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;min-height:var(--control-small);background:var(--card);border:1px solid var(--rule);border-radius:var(--r-control);line-height:1.2;max-width:100%;white-space:normal;text-align:left;font-weight:var(--weight-medium)}
.badge.dark{background:var(--plate);color:var(--plate-ink);border-color:var(--plate)}
.badge.outline{background:transparent}
.badge.accent{background:var(--highlight-soft);border-color:var(--highlight-soft);color:var(--highlight-ink)}

/* Контролы: 44 px, боковые поля, три состояния */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);padding:0 var(--control-pad-x);border:1px solid var(--rule-strong);border-radius:var(--r-control);background:var(--sheet);text-decoration:none;font-weight:var(--weight-medium);line-height:1.2;cursor:pointer;max-width:100%;color:var(--ink);box-shadow:var(--shadow-rest);transition:background var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
.btn:hover{background:var(--card);border-color:var(--ink);box-shadow:var(--shadow-lift);transform:translateY(var(--lift))}
.btn:active{transform:none;box-shadow:none;background:var(--tint)}
.btn.primary{background:var(--action-bg);color:var(--action-ink);border-color:transparent}
.btn.primary:hover{background:var(--action-hover);border-color:transparent}
.btn.primary:active{background:var(--highlight);border-color:transparent}
.card.lead .btn.primary{background:var(--plate);color:var(--plate-ink);border-color:var(--plate)}
.card.lead .btn.primary:hover{background:var(--plate-hover);border-color:var(--plate-hover)}
.btn.small{padding:0 .95em}
.btn[aria-pressed=true]{background:var(--action-bg);color:var(--action-ink);border-color:transparent}
.btn[disabled],.btn[aria-disabled=true]{background:var(--card);color:var(--ink-muted);border-color:var(--rule);cursor:not-allowed;box-shadow:none;transform:none}
.btn[disabled]:hover{background:var(--card);border-color:var(--rule)}
.controls{display:flex;flex-wrap:wrap;gap:var(--control-gap);align-items:center}
.controls.after{margin-top:var(--line)}
.tabs{display:flex;flex-wrap:wrap;gap:var(--control-gap);margin-bottom:var(--line)}
label{display:block;font-weight:var(--weight-medium);margin-bottom:var(--label-gap)}
.field{margin:0 0 var(--line)}
.field .muted{margin-top:calc(var(--line) * .25)}
input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;min-height:var(--control-height);padding:.5em .8em;border:1px solid var(--rule-strong);border-radius:var(--r-field);background:var(--sheet);min-width:0;transition:border-color var(--t-hover) var(--ease)}
input:hover,textarea:hover,select:hover{border-color:var(--ink)}
textarea{min-height:calc(var(--line) * 5);resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;min-height:var(--control-height);padding:calc(var(--line) * .2) 0;font-weight:var(--weight-text)}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--plate);flex:none}
.radio-cards{display:grid;gap:calc(var(--line) * .6)}
.radio-card{display:grid;grid-template-columns:22px minmax(0,1fr);gap:calc(var(--line) * .25) 12px;padding:calc(var(--line) * .6) var(--box-right) calc(var(--line) * .9) calc(var(--line) * .8);border:1px solid var(--rule);border-radius:var(--r-field);background:var(--sheet);cursor:pointer;transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease)}
.radio-card:hover{border-color:var(--ink)}
.radio-card input{margin-top:3px;accent-color:var(--plate)}
.radio-card p{grid-column:2;color:var(--ink-muted);margin:0}
.radio-card[data-on=true]{border-color:var(--ink);background:var(--card)}
.dropzone{border:1px dashed var(--rule-strong);border-radius:var(--r-card);padding:calc(var(--line) * 1.1) calc(var(--line) * 1.3) calc(var(--line) * 1.5);text-align:center;background:var(--card);transition:border-color var(--t-hover) var(--ease)}
.dropzone:hover{border-color:var(--ink)}
.dropzone p{margin-inline:auto}
.file-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:calc(var(--line) * .5) 0;border-bottom:1px solid var(--rule)}
.file-row:last-child{border-bottom:0}
.file-icon{width:36px;height:36px;border-radius:var(--r-small);background:var(--tint);display:grid;place-items:center;flex:none}

/* Заглушки медиа */
.media{aspect-ratio:16/9;width:100%;background:var(--tint);border:1px solid var(--rule);border-radius:var(--r-card);display:grid;place-items:center;color:var(--ink-muted);margin-bottom:calc(var(--line) * .8);overflow:hidden}
.media svg{width:48px;height:48px}
.media.short{aspect-ratio:21/9}
.media img{width:100%;height:100%;object-fit:cover;display:block}

/* Прогресс и шаги */
.steps{list-style:none;padding:0;margin:0;display:grid}
.steps li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px var(--line);align-items:center;padding:calc(var(--line) * .6) 0;border-bottom:1px solid var(--rule)}
.steps li:first-child{padding-top:0}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.steps li p{margin:0;color:var(--ink-muted)}
.step-num{width:36px;height:36px;border:1px solid var(--rule-strong);border-radius:50%;display:grid;place-items:center;background:var(--sheet);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.steps li[data-state=done] .step-num{background:var(--tint);border-color:var(--tint)}
.steps li[data-state=current] .step-num{background:var(--action-bg);color:var(--action-ink);border-color:transparent}
.steps li[data-state=current] div>:first-child{font-weight:var(--weight-semibold)}
.track{height:8px;background:var(--tint);border-radius:var(--r-small);overflow:hidden;margin:calc(var(--line) * .4) 0}
.track span{display:block;height:100%;background:var(--action-bg);transition:width var(--t-block) var(--ease)}

/* Версии, обсуждение */
.version{padding:calc(var(--line) * .6) var(--box-right) calc(var(--line) * .9) calc(var(--line) * .8);background:var(--card);border-radius:var(--r-field)}
.version+.version{margin-top:calc(var(--line) * .6)}
.msg{padding:calc(var(--line) * .6) var(--box-right) calc(var(--line) * .9) calc(var(--line) * .8);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--sheet);max-width:60ch}
.msg.mine{margin-left:auto;background:var(--card)}
.msg+.msg{margin-top:calc(var(--line) * .6)}
.msg .meta{color:var(--ink-muted);margin-bottom:calc(var(--line) * .25)}
.criteria{list-style:none;padding:0;margin:0}
.criteria li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:calc(var(--line) * .45) 0;border-bottom:1px solid var(--rule)}
.criteria li:last-child{border-bottom:0}
.criteria .mark{width:28px;height:28px;border-radius:50%;border:1px solid var(--rule-strong);display:grid;place-items:center;font-weight:var(--weight-semibold)}
.criteria li[data-ok=true] .mark{background:var(--action-bg);color:var(--action-ink);border-color:transparent}

/* Таблицы */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;color:var(--ink-muted);font-weight:var(--weight-medium)}
.table td,.table th{padding:calc(var(--line) * .5) 12px calc(var(--line) * .5) 0;border-bottom:1px solid var(--rule);vertical-align:top}
.table td:last-child,.table th:last-child{padding-right:0}
.table tbody tr:last-child td{border-bottom:0}

/* Редактор: дерево слева, форма справа */
.editor{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--card-gap);align-items:start}
.tree{display:grid;gap:4px}
.tree a{display:flex;gap:10px;align-items:center;min-height:var(--control-height);padding:0 12px;border-radius:var(--r-field);text-decoration:none;transition:background var(--t-hover) var(--ease)}
.tree a:hover{background:var(--card)}
.tree a[aria-current=true]{background:var(--tint);font-weight:var(--weight-semibold)}
.tree .lvl2{padding-left:30px}
.tree .lvl3{padding-left:48px}
.tree .add{color:var(--ink-muted)}

/* Счётчики преподавателя в одну строку */
.counters{display:flex;flex-wrap:wrap;gap:var(--line) calc(var(--line) * 1.5);margin-bottom:var(--module-gap)}
.counters div{display:flex;align-items:baseline;gap:10px}

/* Экраны входа без оболочки: лист по центру */
.login-page{min-height:100vh;display:grid;place-items:start center;padding:var(--page-top) var(--page-side) var(--page-bottom)}
.login{width:100%;max-width:440px;margin-top:calc(var(--line) * 2)}
.login .brand{padding:0;margin-bottom:var(--module-gap)}
.field[data-error=true] input{border-color:var(--ink);border-width:2px}
input[readonly]{background:var(--card);color:var(--ink-muted)}
.error{margin-top:calc(var(--line) * .25);font-weight:var(--weight-medium)}
.field:has(>.error:not([hidden])) textarea,.field:has(>.error:not([hidden])) .dropzone{border:2px solid var(--ink)}
/* Сложенные блоки колонки */
.pile>*:not([hidden])~*:not([hidden]){margin-top:var(--card-gap)}

/* Выноски для доски */
.callout{color:var(--ink-muted);border-left:2px solid var(--rule);padding-left:12px}

@media (max-width:1000px){
  .frame{grid-template-columns:190px minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr) 290px}
  .editor{grid-template-columns:220px minmax(0,1fr)}
  .cards-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .msg,.version,.notice,.radio-card{padding:calc(var(--line) * .5) calc(var(--line) * .6) calc(var(--line) * .9) calc(var(--line) * .45)}
  .dropzone{padding-left:calc(var(--line) * .5);padding-right:calc(var(--line) * .65)}
  .radio-card{padding-left:calc(var(--line) * .4);padding-right:calc(var(--line) * .55)}
  .radio-card p{grid-column:1/-1}
  .notice{border-left-width:3px}
  .frame{display:block}
  .side{display:none}
  .mobile-nav{display:block;background:var(--side-bg);color:var(--side-ink);border-bottom:1px solid var(--rule);padding:0 var(--page-side)}
  .mobile-nav summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:var(--weight-medium);list-style:none}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav .brand{padding:0}
  .mobile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px 0 var(--line)}
  .mobile-links a{padding:0 10px;border:1px solid var(--rule-strong);color:inherit;border-radius:var(--r-field);text-decoration:none;min-height:var(--control-height);display:flex;align-items:center;font-weight:var(--weight-medium)}
  .mobile-links a[aria-current=page]{background:var(--action-bg);color:var(--action-ink);border-color:transparent}
  .top .crumb-root{display:none}
  .top .crumb{color:var(--ink);font-weight:var(--weight-semibold)}
  .user>span:first-child{display:none}
  .split,.cards-2,.cards-3,.editor{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .row>.btn,.row>.controls{justify-self:start}
  .steps li{grid-template-columns:36px minmax(0,1fr)}
  .steps li>.btn,.steps li>.badge{grid-column:2;justify-self:start}
  .kv{grid-template-columns:1fr;gap:calc(var(--line) * .15)}
  .kv dt{margin-top:calc(var(--line) * .3)}
  .table,.table tbody,.table tr,.table td{display:block}
  .table thead{display:none}
  .table tr{padding:calc(var(--line) * .6) 0;border-bottom:1px solid var(--rule)}
  .table td{padding:3px 0;border:0}
  .table tr:last-child{border:0}
  .table td[data-label]:before{content:attr(data-label) ': ';color:var(--ink-muted)}
  .msg{max-width:100%}
  .controls>.btn{max-width:100%}
  .tabs .btn{flex:1 1 auto}
}