/* Язык интерфейса ATAMŪRA — общий с strategy.atamura.group.
   Тёплая бумага, Spectral для заголовков, Golos Text для тела, моно для чисел.
   Прямые углы: скругления в этой системе не используются.
   Слой поверх command.css / live.css — переопределяет токены, не переписывает разметку. */

:root{
  --paper:oklch(96.5% .008 92);
  --surface:oklch(98% .006 92);
  --sunken:oklch(93.5% .01 92);
  --raised:oklch(88% .011 90);
  --ink:oklch(24% .012 80);
  --ink-2:oklch(38% .014 80);
  --ink-3:oklch(46% .015 80);
  --line:oklch(86% .012 88);
  --line-soft:oklch(90.5% .011 90);
  --accent:oklch(42% .09 158);
  --accent-wash:oklch(42% .09 158 / .07);
  --loss:oklch(47% .16 27);
  --loss-wash:oklch(47% .16 27 / .07);
  --warn:oklch(46% .10 75);
  --warn-wash:oklch(46% .10 75 / .08);
  --gold:oklch(58% .08 85);

  /* совместимость со старыми именами в command.css / live.css */
  --muted:var(--ink-3);
  --green:var(--accent);
  --orange:var(--warn);
  --red:var(--loss);

  --display:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Golos Text',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── прямые углы везде ────────────────────────────────────────────── */
.stat-card,.focus-list,.role-card,.gap-box,.anchor-line,.chip,.demo-badge,
.login-form input,.login-form button,.nav-item,.decision-card,.drop-zone,
.deadline-buttons button,.axis-head select,.toast,.bar,.metric-bar,.details-box{
  border-radius:0;
}

/* ── типографика ──────────────────────────────────────────────────── */
.content-head h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  text-transform:none;
  text-wrap:balance;
  margin:10px 0 12px;
}
.content-head h1 em{font-style:italic;color:var(--ink-2)}
.content-head>p:last-child{color:var(--ink-2);font-size:16px;max-width:70ch;text-wrap:pretty}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.stat-card .eyebrow{color:var(--ink-3)}

.num,td.num,td.w,.stat-card b,.topbar-tools time,.calendar,.week,.days{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

/* ── шапка и навигация ─────────────────────────────────────────────
   Меню сверху: разделы стоят в строку под именем компании, как на
   strategy.atamura.group. Боковая колонка съедала ширину таблиц. */
.app{display:block;min-height:100vh}
.sidebar{
  position:sticky;top:0;z-index:20;
  display:flex;flex-direction:row;align-items:stretch;
  background:var(--surface);
  border-right:0;
  border-bottom:1px solid var(--line);
  padding:0 24px;
  min-height:54px;
}
.wordmark,.brand{font-family:var(--mono);letter-spacing:.2em;font-weight:500}
.wordmark{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:0 30px 0 0;font-size:13px;color:var(--ink);
}
.wordmark span{color:var(--ink-3);letter-spacing:.22em}

/* Квадратные маркеры были из прототипа: они читались как чекбоксы,
   хотя ничего не отмечают. Разделы называет текст, состояние — цвет. */
.nav-mark{display:none}
.sidebar nav{display:flex;flex-direction:row;gap:0;flex:1;overflow-x:auto;scrollbar-width:none}
.sidebar nav::-webkit-scrollbar{display:none}
.nav-item{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-3);
  padding:0 15px;
  gap:0;
  border-left:0;
  display:flex;align-items:center;
  transition:color .18s var(--ease),box-shadow .18s var(--ease);
}
.nav-item:hover{color:var(--ink)}
/* активный раздел помечается подчёркиванием снизу, а не заливкой:
   в строке заливка выглядит как кнопка, которой пункт не является */
.nav-item.active{
  color:var(--ink);
  font-weight:500;
  background:transparent;
  box-shadow:inset 0 -2px 0 var(--accent);
}
.side-bottom{
  display:flex;align-items:center;gap:14px;
  margin:0 0 0 auto;padding:0 0 0 20px;
  border-top:0;border-left:1px solid var(--line);
}
.side-bottom>.nav-item{display:none}
.account{padding:0;gap:9px}
.account p{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.account small{color:var(--ink-3);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.logout{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 0;
}
.logout:hover{color:var(--ink)}

@media(max-width:860px){
  .sidebar{padding:0 16px;flex-wrap:wrap;min-height:0}
  .wordmark{padding:12px 20px 12px 0;font-size:12px}
  .side-bottom{border-left:0;padding-left:12px;margin-left:auto}
  .account p{display:none}
  .nav-item{padding:0 11px;font-size:10.5px}
}
@media(max-width:640px){
  /* В примере расчёта прячем промежуточную «выплату»: пять колонок на телефон
     не помещаются, а вклад нужен — по нему складывается итог. */
  .calc-example th:nth-child(4),.calc-example td:nth-child(4){display:none}

  /* Таблица показателей: узкие колонки цифр, имя показателя забирает остальное */
  table.kpi{font-size:12.5px}
  table.kpi td,table.kpi th{padding-right:6px}
  table.kpi th:last-child,table.kpi td:last-child{padding-left:8px}
  .role-card h3{font-size:17px}
  .mult-line{flex-direction:column;gap:6px;align-items:flex-start}

  /* Меню переезжает на свою строку: в одну с логотипом и аккаунтом
     разделы обрезались на «РОЛИ И…», а «ДАННЫЕ» не помещались вовсе. */
  .sidebar{padding:0}
  .wordmark{padding:11px 0 11px 16px;font-size:11.5px;letter-spacing:.16em}
  .side-bottom{padding:0 16px 0 12px}
  .account{display:none}
  .sidebar nav{
    order:3;flex:0 0 100%;
    border-top:1px solid var(--line-soft);
    padding:0 6px;
  }
  .nav-item{padding:11px 10px;font-size:10.5px}
  .nav-item.active{box-shadow:inset 0 -2px 0 var(--accent)}
}
.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-title b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-0.01em}
.account span{border-radius:0;background:var(--ink);font-family:var(--mono);font-size:9.5px}
.signal{border-radius:0;background:var(--accent);box-shadow:none;width:9px;height:9px}

/* Итог обзора — одна строка вместо трёх плиток об одном и том же. */
.tally{
  margin:0 0 8px;padding:20px 0;
  border-top:1px solid var(--ink);
  font-size:15px;color:var(--ink-2);
}
.tally b{color:var(--ink)}

/* ── плитки обзора ────────────────────────────────────────────────── */
.stat-row{display:block;gap:0;border:0;margin:0}
.stat-card{
  background:transparent;
  border:0;
  border-right:1px solid var(--line-soft);
  padding:20px 22px 22px;
}
.stat-card:last-child{border-right:0}
.stat-card b{font-size:31px;font-weight:500;letter-spacing:-0.03em;line-height:1.05;margin:6px 0 4px}
.stat-card small{font-size:12.5px;color:var(--ink-3);line-height:1.4;display:block}
/* золотая плитка выделяется цветом числа, а не полосой сбоку */
.stat-card.gold{border-left:0}
.stat-card.gold b{color:var(--accent)}

.anchor-line{
  background:var(--sunken);
  border:0;
  border-left:0;
  border-top:2px solid var(--ink);
  padding:14px 18px;
}

.focus-list{background:transparent;border:0;padding:0}
.focus-item{border-bottom:1px solid var(--line-soft);padding:11px 0;font-size:13.5px}
.focus-item .who{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* ── карточки ролей ───────────────────────────────────────────────── */
/* Одна роль — одна строка на всю ширину: в две колонки соседние
   карточки читались вперемешку, и было непонятно, чей это показатель. */
.role-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.role-card{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:22px 0 24px;
  gap:10px;
}
.role-card h3{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-0.01em}
.role-card .sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.bar{height:3px;background:var(--raised)}
.bar i{background:var(--accent)}
.bar.low i{background:var(--warn)}

table.kpi{font-size:13.5px}
table.kpi td{padding:9px 8px 9px 0;border-top:1px solid var(--line-soft)}
table.kpi td.w,table.kpi td.num{font-size:12.5px;color:var(--ink-2)}
table.kpi tbody tr:first-child td{border-top:0}
/* Без шапки колонки читались как загадка: «60% — —» ничего не говорит. */
table.kpi th{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:0 8px 7px 0;border-bottom:1px solid var(--line);
}
table.kpi th.w,table.kpi th.num{text-align:right}
/* «Факт» выровнен вправо, «Статус» влево — без зазора заголовки слипались */
table.kpi th:last-child,table.kpi td:last-child{padding-left:20px}
table.kpi th:first-child,table.kpi td:first-child{width:auto}
table.kpi thead+tbody tr:first-child td{border-top:0;padding-top:11px}

/* ── метки состояния ──────────────────────────────────────────────── */
.chip{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 7px;
  border:1px solid;
}
.chip.ok{background:var(--accent-wash);color:var(--accent);border-color:var(--accent)}
.chip.warn{background:var(--warn-wash);color:var(--warn);border-color:var(--warn)}
.chip.miss{background:var(--loss-wash);color:var(--loss);border-color:var(--loss)}
.chip.money{background:transparent;color:var(--gold);border-color:var(--gold)}
.chip.mult{background:var(--sunken);color:var(--ink-2);border-color:var(--line)}

.bonus-line{
  border-top:1px solid var(--line);
  border-bottom:0;
  padding-top:12px;
  font-size:13px;
  color:var(--ink-2);
}
.bonus-line b.coef{font-family:var(--mono);color:var(--accent);font-size:17px;font-weight:500}

/* ── условия-множители и гейты в таблице карточки ─────────────────── */
/* Условие умножает ИТОГ карточки и сильнее любого веса, поэтому строка
   должна читаться, а не теряться: блок отделён двойной линией сверху и
   подложкой, метка в колонке веса заменяет процент. */
table.kpi tr.cond td{
  background:var(--sunken);
  border-top:1px solid var(--line);
}
table.kpi tr.cond:first-of-type td{border-top:2px solid var(--ink)}
table.kpi tr.cond td:first-child{font-weight:500}
.chip.mult-mark{
  background:transparent;color:var(--gold);border-color:var(--gold);
  white-space:nowrap;
}
.chip.gate-mark{
  background:transparent;color:var(--loss);border-color:var(--loss);
  white-space:nowrap;
}
.cond-note{
  font-size:12px;
  line-height:1.5;
  color:var(--ink-3);
  margin:8px 0 0;
  max-width:74ch;
  text-wrap:pretty;
}
.cond-note b{color:var(--ink-2);font-weight:500}

.mult-line{
  display:flex;
  gap:12px;
  align-items:baseline;
  border-top:1px solid var(--line-soft);
  padding-top:10px;
  font-size:13px;
  color:var(--ink-2);
}
.mult-line b{color:var(--ink);font-weight:500}

.metric-note{
  color:var(--ink-2);
  font-size:12.5px;
  line-height:1.5;
  padding:0 0 10px;
  max-width:72ch;
  text-wrap:pretty;
}
.metric-note code{
  font-family:var(--mono);
  font-size:11.5px;
  background:var(--sunken);
  padding:1px 5px;
  color:var(--ink-2);
}

/* Показатели в наблюдении с портала убраны (решение PM 02.08):
   они не платят и не задерживают расчёт, а внимание забирали. */


.base-share-note{
  grid-column:1/-1;
  border-top:1px solid var(--line);
  margin:0;padding:18px 0 0;
  font-size:13px;color:var(--ink-2);line-height:1.55;max-width:78ch;
}
.base-share-note b{color:var(--ink);font-weight:600}


/* Описание показателя не должно раздувать строку: по умолчанию свёрнуто,
   раскрывается там же, где стоит показатель — уводить его в другой раздел
   значит заставлять человека искать объяснение отдельно от цифры. */
.defs{
  border-top:1px solid var(--line-soft);
  margin-top:4px;padding-top:14px;
  max-width:92ch;
}
.defs-head{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 8px;
}
.def{
  margin:0 0 7px;font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:pretty;
}
.def:last-child{margin-bottom:0}
.def b{color:var(--ink);font-weight:600}

/* ── как считается ────────────────────────────────────────────────── */
.method{border-top:2px solid var(--ink);margin-top:34px;padding-top:22px}
.method h2{font-family:var(--display);font-weight:500;font-size:23px;letter-spacing:-0.01em;margin:0 0 6px}
.method .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin-top:18px;border-top:1px solid var(--line)}
.method .grid>div{border-right:1px solid var(--line-soft);padding:16px 20px 18px}
.method .grid>div:last-child{border-right:0}
.method .grid h4{margin:0 0 6px;font-size:14px;font-weight:600;letter-spacing:-0.01em}
.method .grid p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.method table{width:100%;border-collapse:collapse;font-size:13px;margin-top:16px}
.method table th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;font-weight:500;padding:0 10px 8px 0;border-bottom:1px solid var(--ink);
}
.method table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line-soft)}
.method table td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
/* Узловые значения шкалы — 100% и потолок — выделяются весом,
   а не сменой границ: это строки таблицы, а не итог. */
.method table tr.node td{font-weight:600;color:var(--ink);background:var(--sunken)}
.method table tr.total td{border-bottom:0;border-top:1px solid var(--ink);font-weight:600;color:var(--ink)}
@media(max-width:720px){
  .method .grid>div{border-right:0;border-bottom:1px solid var(--line-soft);padding:14px 0}
  .method .grid>div:last-child{border-bottom:0}
  .method table{display:block;overflow-x:auto}
}

/* ── прочее ───────────────────────────────────────────────────────── */
.gap-box{background:transparent;border:0;border-top:2px solid var(--ink);padding:16px 0 0}
.gap-box h3{font-family:var(--display);font-weight:500;font-size:17px}
.gap-box td{border-top:1px solid var(--line-soft);padding:8px 8px 8px 0}
.demo-badge{
  background:var(--warn-wash);color:var(--warn);border:1px solid var(--warn);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 8px;
}
.load-note{color:var(--ink-3)}
.toast{background:var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}

/* ── вход ─────────────────────────────────────────────────────────────
   Одна страница-лист, как на strategy.atamura.group: мета-строка сверху,
   крупный серифный заголовок, поле-подчёркивание, мета-строка снизу. */
.gate{
  position:fixed;inset:0;z-index:100;
  background:var(--paper);color:var(--ink);
  display:grid;grid-template-rows:auto 1fr auto;
  font-family:var(--sans);
}
/* Полосы тянутся во всю ширину, содержимое держится в колонке 1140px —
   так же, как на strategy: линия до края экрана, текст по общей сетке. */
.gate-wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 32px}
.gate-bar{
  padding:20px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.gate-bar .gate-wrap{display:flex;justify-content:space-between;gap:16px}
.gate-bar .r{color:var(--ink-3)}
.gate-foot{border-bottom:0;border-top:1px solid var(--line);color:var(--ink-3)}
.gate-mid{display:flex;align-items:center;padding:40px 0}
.gate-box{width:100%;max-width:620px}
.gate .kicker{
  margin:0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.gate h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,6vw,4rem);line-height:1.06;letter-spacing:-0.02em;
  margin:16px 0 24px;text-wrap:balance;
}
.gate h1 i{font-style:italic;color:var(--ink-2)}
.gate-lede{color:var(--ink-2);font-size:16.5px;max-width:48ch;margin:0 0 44px;text-wrap:pretty}
.gate-form label{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.gate-row{
  display:flex;align-items:center;gap:16px;
  border-bottom:1px solid var(--ink);padding-bottom:10px;max-width:520px;
}
.gate-row:focus-within{border-bottom-color:var(--accent)}
.gate-row input{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--sans);font-size:19px;color:var(--ink);padding:4px 0;letter-spacing:.14em;
}
.gate-row input:focus{outline:0}
.gate-row button{
  border:0;background:transparent;cursor:pointer;padding:4px 0;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  transition:color .18s var(--ease);
}
.gate-row button:hover{color:var(--accent)}
.gate .form-error{color:var(--loss);font-size:13px;margin:14px 0 0;min-height:19px}
@media(max-width:640px){
  .gate-wrap{padding:0 20px}
  .gate-bar{padding:16px 0;font-size:10px;letter-spacing:.14em}
  .gate-foot span{line-height:1.5}
  .gate-mid{padding:28px 0}
  .gate-lede{margin-bottom:32px}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--paper)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Подзаголовок в шапке таблицы: колонка «Сумма C-level» без номинала читалась
   как отдельная величина, а это тот же коэффициент, умноженный на номинал. */
.th-sub{
  display:block;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:none;
  color:var(--ink-3);
  font-weight:400;
  margin-top:2px;
}

/* ── пример расчёта в карточке ────────────────────────────────────── */
/* Считается живьём из весов карточки: написанный руками устареет в день
   правки весов. Задача блока — показать цену недобора в тенге. */
.example{
  border-top:1px solid var(--line-soft);
  padding-top:12px;
  margin-top:14px;
}
.example-head{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 6px;
}
.example p{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0 0 6px;text-wrap:pretty}
.example p b{color:var(--ink);font-weight:500}
.example .example-note{font-size:12px;color:var(--ink-3);margin:0}
.example ul{margin:0 0 6px;padding-left:18px}
.example li{font-size:13px;line-height:1.55;color:var(--ink-2);margin:4px 0}
.example li b{color:var(--ink);font-weight:500}

/* ── таблицы метода: цифры рядом с текстом, а не у края экрана ──────
   На широком мониторе таблица растягивалась на всю колонку, и число
   уезжало от своей строки на пол-экрана — глаз терял, к чему оно.
   Ограничиваем ширину и задаём узкие числовые колонки: цифра встаёт
   сразу под своим заголовком и близко к названию показателя. */
.method table{max-width:760px}
.method table th:first-child,.method table td:first-child{width:auto}
.method table th.num,.method table td.num{width:104px;padding-right:0}
.calc-example th.num,.calc-example td.num{width:92px}
.method table th:not(:first-child),.method table td:not(:first-child){padding-left:14px}
@media(max-width:820px){
  .method table{max-width:100%}
  .method table th.num,.method table td.num{width:auto}
}