/* Стили страниц старого каркаса (base.html): .wrap, .sec, .pn, .card, .field, .ohero, .tl и прочее.
   Вынесены из base.html без изменений (план, фаза 6, 2026-09-22): оба каркаса теперь читаются одинаково,
   а перенос страниц на studio_base идёт постранично с проверкой. */
/* Tokens (colours, radii, shadows, type, spacing) live in _tokens.html. This block styles the
   legacy workspace shell only; rules that used to hang off the root "dark" class are scoped to
   body.legacy-shell (same specificity, same cascade position) so that class is no longer load-bearing. */
*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x и на html: на мобильных body-hidden не запрещает боковой скролл вьюпорта */
html{scroll-behavior:smooth;overflow-x:hidden}
body.legacy-shell ::selection{background:rgba(77,141,255,.3)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100dvh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1220px;margin:0 auto;padding:0 32px 90px}
/* Do not infer layout scale from physical monitor resolution or devicePixelRatio. */
html{font-size:16px}body{--z:1;min-height:100dvh}
.uiwrap{display:none}
.uimenu{position:absolute;top:calc(100% + 6px);right:0;z-index:40;display:none;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh2);padding:5px;min-width:132px}
.uimenu.on{display:flex}
.uimenu button{background:transparent;border:none;color:var(--ink);text-align:left;padding:6px 10px;
  border-radius:var(--r-s);cursor:pointer;font-size:var(--type-body);white-space:nowrap}
.uimenu button:hover{background:var(--chip2)}
.uimenu button.on{background:var(--ink);color:var(--btnfg)}
.uimenu .ttl{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:5px 10px 3px}
.mono{font-family:var(--mono)}

/* header — плавающая пилюля */
header{display:flex;align-items:center;gap:18px;padding:10px 12px 10px 20px;margin-top:14px;
  position:sticky;top:10px;z-index:60;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--sh)}
body.legacy-shell header{background:rgba(23,26,33,.88)}
.logo b{font-family:var(--sans);font-weight:800;font-size:var(--type-lead);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px}
.logo b::before{content:"";width:10px;height:10px;background:#e5484d;border-radius:3px}
.logo span{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-left:8px}
nav{display:flex;gap:2px;flex:1}
nav a{padding:8px 14px;color:var(--muted);font-size:var(--type-body);font-weight:500;border-radius:var(--r-pill);transition:.15s}
nav a:hover{color:var(--ink);background:var(--chip)}
.userchip{display:flex;align-items:center;gap:8px;font-size:var(--type-body)}
.userchip a{display:flex;align-items:center;gap:9px;background:var(--chip);border:1px solid transparent;
  padding:5px 13px 5px 6px;border-radius:var(--r-pill);transition:.15s}
.userchip a:hover{border-color:var(--line2)}
.ava{width:26px;height:26px;border-radius:50%;background:var(--ink);display:grid;place-items:center;
  font-weight:700;font-size:var(--type-body);color:var(--bg)}
.userchip b{font-weight:600}
.userchip .r{color:var(--dim);font-family:var(--mono);font-size:var(--type-body);text-transform:uppercase;letter-spacing:.08em}
.vlogout{position:fixed;top:16px;right:18px;z-index:80;margin:0}
.vlogout button{background:var(--chip);border:1px solid var(--line2)}
.vlogout button:hover{border-color:var(--muted)}

/* type */
h1{font-family:var(--cond);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.03em;line-height:1.05;margin-bottom:20px}
.sec{display:flex;align-items:center;gap:12px;margin:40px 0 14px}
.sec .n{font-family:var(--mono);font-size:var(--type-body);color:var(--dim);background:var(--card);
  border:1px solid var(--line);padding:3px 9px;border-radius:var(--r-pill)}
.sec h2{font-family:var(--cond);font-weight:700;font-size:1.18rem;letter-spacing:-.02em}
.sec .ln{flex:1;height:1px;background:var(--line)}
.sec .hint{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.05em;color:var(--dim)}
.muted{color:var(--muted)}.small{font-size:var(--type-body)}

/* panels & cards */
.pn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:20px 22px;margin-bottom:16px}
.msg{border-radius:var(--rs);padding:10px 14px;margin:16px 0;font-size:var(--type-body)}
.err{border-radius:var(--rs);padding:10px 14px;margin-bottom:14px;font-size:var(--type-body)}
body.legacy-shell .msg{background:#2a2312;border:1px solid #6b5a14;color:#fcd34d}
body.legacy-shell .err{background:#2a1416;border:1px solid #7f2a2a;color:#fca5a5}

/* buttons & forms */
button,.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);border:1px solid var(--ink);
  color:var(--btnfg);padding:9px 18px;font-size:var(--type-body);font-weight:600;cursor:pointer;font-family:var(--sans);
  border-radius:var(--rs);transition:.15s}
button:hover,.btn:hover{background:var(--btnhov);transform:translateY(-1px)}
button.ghost,.btn.ghost{background:var(--card);border:1px solid var(--line2);color:var(--ink);font-weight:500}
button.ghost:hover,.btn.ghost:hover{border-color:var(--ink);background:var(--card)}
input,select,textarea{background:var(--card);border:1px solid var(--line2);color:var(--ink);
  padding:9px 12px;font-size:var(--type-body);font-family:var(--sans);outline:none;border-radius:var(--rs);transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,22,35,.08)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
   font-weight:500;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2)}
td{padding:11px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}

/* badges & stats */
.badge{display:inline-block;padding:3px 11px;font-family:var(--mono);font-size:var(--type-body);letter-spacing:.06em;
  font-weight:500;border-radius:var(--r-pill)}
body.legacy-shell .b-admin{background:#3a1d1d;color:#fca5a5}
body.legacy-shell .b-staff{background:#1d2a44;color:#93b4f5}
body.legacy-shell .b-client{background:#153226;color:#6ee7b7}
body.legacy-shell .b-viewer{background:#2a1d44;color:#c4b5fd}
body.legacy-shell .b-off{background:#232833;color:var(--dim)}
body.legacy-shell .b-ok{background:#153226;color:#6ee7b7}
.stat{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--type-body);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.stat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.c-script{color:var(--st-script)}
.c-pre{color:var(--st-pre)}.c-gen{color:var(--st-gen)}.c-edit{color:var(--st-edit)}
.c-voice{color:var(--st-voice)}.c-fin{color:var(--st-fin)}.c-delivered{color:var(--st-delivered)}
.c-upcoming{color:var(--dim)}

/* hero (dashboard) — статистика плитками */
.hero{padding:36px 0 8px}
.hero .kick{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.hero h1{margin-bottom:0}
.hero .sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:26px}
.hero .sub>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;box-shadow:var(--sh);transition:.2s}
.hero .sub>div:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.hero .sub .k{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.hero .sub .v{font-family:var(--cond);font-size:var(--type-page);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.hero .sub .v small{font-size:var(--type-body);font-weight:500;color:var(--muted);font-family:var(--sans);letter-spacing:0}

/* order cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ocard{border:1px solid var(--line);background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:20px 22px 18px;transition:.2s;display:block;position:relative}
.ocard:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.ocard h3{font-family:var(--cond);font-weight:700;font-size:1.18rem;letter-spacing:-.02em;margin-bottom:4px}
.ocard .m{font-family:var(--mono);font-size:var(--type-body);color:var(--muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em}
.ocard .row2{display:flex;justify-content:space-between;align-items:center}
.ocard .pct{font-family:var(--cond);font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.ocard .pct small{font-size:var(--type-body);font-weight:500;color:var(--muted);font-family:var(--mono);margin-left:4px;letter-spacing:.06em}
.ocard .due{font-family:var(--mono);font-size:var(--type-body);font-weight:500}
.pbar{height:6px;background:var(--chip2);border-radius:var(--r-pill);overflow:hidden;margin:12px 0 10px}
.pbar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--ok)}

/* production timeline / order page */
.back{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--mono);font-size:var(--type-body);
  letter-spacing:.14em;text-transform:uppercase;margin:22px 0 14px;background:var(--card);
  border:1px solid var(--line2);padding:9px 16px;border-radius:var(--r-pill);transition:.15s;box-shadow:var(--sh)}
.back:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ohero{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:4px 0 26px}
.ohero h1{margin-bottom:0}
.ohero .meta{display:flex;gap:32px;padding-bottom:6px}
.ohero .meta .k{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.ohero .meta .v{font-family:var(--cond);font-size:1.05rem;font-weight:700}
.tl{padding:30px 26px 22px;overflow-x:auto}
.tl-in{min-width:760px;position:relative}
.tl-stages{display:flex;gap:3px}
.tl-st{position:relative;padding-top:6px}
.tl-st .bar{height:8px;margin-bottom:13px;border-radius:var(--r-pill)}
.tl-st .nm{font-family:var(--cond);font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.tl-st .dt{font-family:var(--mono);font-size:var(--type-body);color:var(--muted);margin-top:4px}
.tl-st .tag{position:absolute;top:-15px;left:0;font-family:var(--mono);font-size:var(--type-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.tl-st.done .nm,.tl-st.passed .nm{color:var(--muted)}
.tl-st.next .bar{opacity:.2}.tl-st.next .nm{color:var(--dim)}.tl-st.next .dt{color:#c3c7cf}
.tl-now{position:absolute;top:-8px;height:52px;width:2px;background:var(--ink);z-index:3;border-radius:2px}
.tl-now::after{content:"we are here";position:absolute;top:-15px;left:8px;white-space:nowrap;font-family:var(--mono);font-size:var(--type-body);
  letter-spacing:.14em;text-transform:uppercase;color:var(--bg);background:var(--ink);padding:2px 9px;border-radius:var(--r-pill)}
.tl-foot{display:flex;justify-content:space-between;margin-top:26px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:var(--type-body);color:var(--muted)}
.tl-foot b{color:var(--ink);font-weight:600}
.stub{border:1.5px dashed var(--line2);border-radius:var(--r);padding:26px;text-align:center;color:var(--muted);font-size:var(--type-body)}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.footer-note{margin-top:60px;text-align:center;font-family:var(--mono);color:var(--dim);font-size:var(--type-body);letter-spacing:.26em;text-transform:uppercase}

@media(max-width:900px){
  .wrap{padding:0 12px 70px}
  header{flex-wrap:wrap;gap:8px 10px;padding:10px 14px;border-radius:var(--r-l);top:6px}
  header .logo{margin-right:auto}
  nav{order:3;flex:0 0 100%;width:100%;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  .userchip{margin-left:auto}
  .userchip a .r{display:none}
  input[type=file]{width:100%;max-width:100%}
  input,select{max-width:100%}
  /* широкие таблицы скроллятся внутри своей панели, а не распирают страницу */
  .pn,.card{overflow-x:auto}
  .hero{padding:24px 0 6px}
  .hero .sub{gap:10px;grid-template-columns:repeat(2,1fr)}
  .gantt{padding:12px 0 0}
  .g-in{--namew:150px}
  .g-name{padding-left:12px;padding-right:10px}
  .g-name a{font-size:var(--type-body)}
  .ohero .meta{gap:18px;flex-wrap:wrap}
  .tl{padding:20px 12px 16px}
}
/* комната черновиков: жёлтая нить сверху — вкладку видно и по странице, не только по иконке */
body.draftroom::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;
  background:var(--lime);z-index:60}
.userchip .r.adm{background:var(--lime);color:#241a02;font-weight:700}
/* gantt */
/* высота ≈ 5 строк; 6-й проект включает вертикальный скролл.
   без горизонтального паддинга — иначе крайние числа шкалы торчат слева от замороженной колонки */
.gantt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 0 0;overflow:auto;max-height:452px;position:relative}
.gantt.grabbable{cursor:grab}
.gantt.dragging{cursor:grabbing;user-select:none}
.gantt.dragging a{pointer-events:none}
.g-in{min-width:860px;position:relative;--namew:230px}
/* шапка (месяцы+дни) заморожена сверху при вертикальном скролле */
.g-head{position:sticky;top:0;z-index:4;background:var(--ghead)}
/* угол: непрозрачный оверлей верх-лево (прямой ребёнок .g-in, не вложен в sticky-шапку) */
.g-corner{position:sticky;top:0;left:0;z-index:6;width:calc(var(--namew) + 1px);height:47px;
  margin-bottom:-47px;background:var(--ghead);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);pointer-events:none;border-top-left-radius:var(--r)}
.g-months{display:flex;margin-left:var(--namew);border-bottom:1px solid var(--line2)}
.g-months div{font-family:var(--mono);font-size:var(--type-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-bottom:8px;font-weight:600;border-left:1px dashed var(--line2);padding-left:8px;padding-top:2px}
.g-months div:first-child{border-left:none;padding-left:0}
.g-ticks{position:relative;height:20px;margin-left:var(--namew);border-bottom:1px solid var(--line)}
.g-ticks span{position:absolute;top:3px;transform:translateX(-50%);font-family:var(--mono);font-size:var(--type-body);color:var(--muted)}
.g-ticks span.major{color:var(--ink);font-weight:600}
.g-ticks span.wknd{color:var(--muted)}
.g-grid{position:absolute;inset:0 0 0 var(--namew);pointer-events:none;z-index:0}
.g-grid i{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(232,234,240,.07)}
.g-grid i.major{border-left-color:rgba(232,234,240,.15)}
.g-grid s{position:absolute;top:0;bottom:0;text-decoration:none;
  background:repeating-linear-gradient(-45deg,rgba(232,234,240,.05) 0 5px,transparent 5px 10px)}
.g-body{position:relative;padding-top:4px}
.g-today{position:absolute;top:-32px;bottom:0;width:2px;background:var(--ink);z-index:3;border-radius:2px}
.g-today::before{content:"today";position:absolute;top:-4px;left:6px;font-family:var(--mono);font-size:var(--type-body);letter-spacing:.18em;
  text-transform:uppercase;color:var(--bg);background:var(--ink);padding:2px 9px;border-radius:var(--r-pill)}
.g-row{display:flex;align-items:center;min-height:68px;position:relative;z-index:2;border-top:1px solid var(--line)}
.g-row:first-of-type{border-top:none}
/* колонка названий заморожена слева — отдельный блок, не уезжает при панораме */
.g-name{width:var(--namew);flex:0 0 var(--namew);padding-left:16px;padding-right:18px;position:sticky;left:0;z-index:5;
  background:var(--panel);border-right:1px solid var(--line);align-self:stretch;
  display:flex;flex-direction:column;justify-content:center}
.g-name a{font-family:var(--cond);font-weight:700;font-size:.95rem;display:block;line-height:1.25;letter-spacing:-.01em}
.g-name a:hover{text-decoration:underline;text-underline-offset:3px}
.g-name .m{font-family:var(--mono);font-size:var(--type-body);color:var(--muted);margin-top:4px}
.g-track{position:relative;flex:1;height:18px}
/* радиус приходит инлайном (br): концы цепочки = пилюля, стыки стадий = встык */
.g-track i{position:absolute;top:0;bottom:0}
/* стык этапов: линия чуть выше/ниже полосы + число под ней */
.g-bd{position:absolute;top:-5px;bottom:-5px;width:1.5px;background:rgba(232,234,240,.35);z-index:4}
.g-bd em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;
  font-style:normal;font-family:var(--mono);font-size:var(--type-body);font-weight:600;color:var(--ink);
  background:var(--panel);padding:0 2px;line-height:1.2;border-radius:3px}
/* легенда цветов — отдельный всегда-видимый блок под графиком */
.glegend{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;margin-top:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.glegend span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:var(--type-body);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glegend i{width:8px;height:8px;border-radius:50%}

.g-corner{display:flex;align-items:center;padding:0 16px;font-size:var(--type-caption);color:var(--muted)}
.g-dates{display:flex;flex-wrap:wrap;gap:0 4px;font-size:var(--type-caption);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:4px}.g-dates time{white-space:nowrap}
.g-name{padding-block:12px}.g-name a{overflow-wrap:anywhere}.g-name .stat{font-weight:600}
.gantt .stat{display:inline-flex;align-items:center;gap:7px}.gantt .stat::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.gantt .c-script{color:var(--st-script)}.gantt .c-pre{color:var(--st-pre)}.gantt .c-gen{color:var(--st-gen)}.gantt .c-edit{color:var(--st-edit)}.gantt .c-voice{color:var(--st-voice)}.gantt .c-fin{color:var(--st-fin)}.gantt .c-delivered{color:var(--st-delivered)}.gantt .c-upcoming{color:var(--dim)}
.g-undated{display:flex;gap:10px 20px;align-items:center;flex-wrap:wrap;margin-top:16px;font-size:var(--type-body)}.g-undated>span{color:var(--muted)}.g-undated a{text-decoration:underline;text-underline-offset:4px}
.client-wait-label{font-size:var(--type-body);line-height:1.35;color:#afc8df;display:block;margin-top:7px}
.client-wait-label[hidden]{display:none}.client-wait-label.time{color:#ffd08a}.client-wait-label.overdue{color:#ff947d}
.g-track.has-client-wait{height:54px}.g-track.has-client-wait>i{height:18px;bottom:auto}.g-track.has-client-wait .g-bd{height:28px;bottom:auto}
.g-track .g-review-band{top:45px;height:5px!important;bottom:auto!important;background:#afc8df;border-radius:2px;z-index:4}
.g-track .g-review-band.time{background:#ffd08a}.g-track .g-review-band.overdue{background:#ff785b}
/* Такая же спокойная строка, как «Согласование этапов»: это напоминание, а не тревога.
   Жёлтый — тот же смысл, что «срок прошёл» в календаре (owner, 2026-09-20). */
/* details в селекторе не для красоты: общее правило слева собрано в :is() со вложенным
   элементом, и без этого оно перевешивает (ловушка веса, см. шапку темы). */
html body.aid-shell details.client-review-status{border:0;border-block:1px solid var(--line);border-radius:0;background:transparent;padding:14px 0;margin:20px 0}
html body.aid-shell .client-review-status>summary{min-height:44px;font-size:var(--type-lead);font-weight:600;display:list-item;list-style-position:inside;cursor:pointer}
html body.aid-shell .client-review-status>summary .client-wait-label{display:inline;margin:0;font-size:inherit;font-weight:inherit}
html body.aid-shell .client-review-status .client-wait-label.overdue{color:var(--warn)}
html body.aid-shell .client-review-status .client-wait-label.time{color:var(--warn)}
.client-review-status[hidden]{display:none}.client-review-status summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
.client-review-status .client-wait-label{margin:0}.client-review-status ul{padding-left:20px;font-size:var(--type-body);line-height:1.6;color:var(--muted);margin:8px 0}
.client-review-status p{font-size:var(--type-body);color:var(--muted);margin:8px 0}
@media(max-width:900px){.g-name [data-wait-label]{grid-column:1 / -1;font-size:var(--type-body);margin-top:4px}body.aid-shell .g-track.has-client-wait{height:54px;min-height:54px}}