/* Общая оболочка кабинета «Универ». Подключать после ds.css + a11y.css.
   Сайдбар рендерит shell.js. */
:root{--danger:#d9736b;--info:var(--accent-2,#7f9cc9)}

.app{display:grid;grid-template-columns:212px 1fr;gap:var(--s-4);align-items:start;
  max-width:1320px;margin:0 auto;padding:16px 20px 56px}

/* ── Sidebar ── */
.side{position:sticky;top:16px;align-self:start;display:grid;gap:16px;padding:16px 13px;border-radius:var(--r-lg)}
.side .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.side .logo{font:700 17px/1 var(--font-sans);letter-spacing:-.03em;color:var(--text)}
.side nav{display:grid;gap:2px}
.navi{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;color:var(--muted);font:500 13px/1.1 var(--font-sans);
  cursor:pointer;transition:var(--t-base);text-align:left;width:100%;text-decoration:none}
.navi:hover{color:var(--text);background:var(--surface-2)}
.navi[aria-current="page"]{background:var(--accent-strong);color:var(--on-accent)}
.navi svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9}
.navi .cnt{margin-left:auto;font:600 10px/1 var(--font-mono);opacity:.7}
.side .sep{border-top:var(--hairline) solid var(--stroke);padding-top:14px;display:grid;gap:8px}
.side .prog-l{font:600 10px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.bar{height:7px;border-radius:var(--r-pill);background:var(--field);border:var(--hairline) solid var(--stroke);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent);transition:width var(--dur-slow) var(--ease)}
.side .who{display:flex;align-items:center;gap:10px}
.ava{width:30px;height:30px;border-radius:var(--r-pill);background:var(--media-bg);border:var(--hairline) solid var(--stroke);
  display:grid;place-items:center;font:700 11px/1 var(--font-mono);color:var(--muted)}
.who .nm{font:500 13px/1.2 var(--font-sans);color:var(--text)}
.who .rl{font:400 11px/1.3 var(--font-sans);color:var(--dim)}

/* ── Main ── */
.main{min-width:0;display:grid;gap:14px}
.main:focus{outline:none}
.top-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top-row h1{font:600 clamp(20px,2vw,26px)/1.1 var(--font-sans);letter-spacing:-.02em;color:var(--text)}
.sub{font:600 10px/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.btn.sm{padding:.5em 1em;font-size:.84rem}

/* toolbar */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;background:var(--field);border:var(--hairline) solid var(--stroke);
  border-radius:var(--r-pill);padding:7px 12px;min-width:200px;flex:1;max-width:320px}
.search svg{width:14px;height:14px;stroke:var(--dim);fill:none;stroke-width:2}
.search input{border:none;background:transparent;color:var(--text);font:400 13px/1 var(--font-sans);width:100%;outline:none}
.filt{display:flex;gap:5px;flex-wrap:wrap}
.chip{font:600 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.03em;padding:.55em .9em;
  border-radius:var(--r-pill);background:var(--surface-2);border:var(--hairline) solid var(--stroke);color:var(--muted);cursor:pointer;transition:var(--t-base)}
.chip:hover{color:var(--text);border-color:var(--stroke-2)}
.chip[aria-pressed="true"]{background:var(--accent-strong);color:var(--on-accent);border-color:transparent}
.view{display:flex;gap:2px;padding:2px;border-radius:var(--r-pill);background:var(--surface-2);border:var(--hairline) solid var(--stroke)}
.view button{border:none;background:transparent;padding:6px 8px;border-radius:var(--r-pill);cursor:pointer;color:var(--muted);display:grid;place-items:center}
.view button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.view button[aria-pressed="true"]{background:var(--surface);color:var(--text)}

/* badges (status) */
.badge{display:inline-flex;align-items:center;gap:5px;font:600 10px/1 var(--font-mono);letter-spacing:.03em;
  text-transform:uppercase;padding:.45em .65em;border-radius:var(--r-pill);
  background:var(--surface);border:var(--hairline) solid var(--stroke);color:var(--muted)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim)}
.badge.review::before{background:var(--info)}
.badge.changes::before{background:var(--warning)}
.badge.approved::before{background:var(--accent)}
.badge.published{color:var(--text)}.badge.published::before{background:var(--success)}
.badge.ok::before{background:var(--success)}
.badge.archived{opacity:.7}

/* generic card helpers */
.panel{padding:16px 18px}
.ib{display:grid;place-items:center;width:29px;height:29px;border-radius:var(--r-pill);
  border:var(--hairline) solid var(--stroke);background:var(--surface-2);color:var(--muted);cursor:pointer}
.ib svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* empty / states */
.state{text-align:center;padding:34px 16px;color:var(--muted)}
.state h2{font:600 18px/1.2 var(--font-sans);color:var(--text);margin-bottom:6px}

@media(max-width:900px){
  .app{grid-template-columns:1fr;gap:12px}
  .side{position:static}
  .side nav{grid-auto-flow:column;overflow-x:auto;gap:3px}
  .navi{white-space:nowrap}.navi .cnt{display:none}
  .side .sep,.side .who{display:none}
}