/* ═════ НАВИГАТОР · база и сетки ═════ */
/* display управляется механизмом экранов (.screen / .screen.active) —
   id-правило НЕ задаёт display, иначе навигатор виден на всех вкладках. */
#screen-navigator {
  flex-direction:column; gap:20px;
  /* Экранно-локальный overlay-токен (§6.2 спеки — единственное исключение из anti-pattern 10:
     тёмная плёнка модалки тематически независима от темы, в палитре шасси аналога нет). */
  --nav-overlay: rgba(15,23,42,.55);
}
#screen-navigator > .block-card,
#screen-navigator > #nav-bottom { width:100%; }

/* Шапка секции внутри блока */
#screen-navigator .nav-head{ display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px; }
#screen-navigator .nav-head .nav-kicker{
  font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
}
#screen-navigator .nav-head h2{ font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0; }
#screen-navigator .nav-head-sub{ font-size:12.5px;color:var(--muted);font-weight:500; }

/* ═════ БЛОК 1 · Маршрут ═════ */
#screen-navigator #nav-route{ padding:16px 24px; }
#screen-navigator .nav-route-row{
  display:grid;grid-template-columns:200px 1fr 200px;gap:20px;align-items:center;
}
#screen-navigator .nav-route-left{ display:flex;flex-direction:column;gap:4px; }
#screen-navigator .nav-route-left .nav-kicker{
  font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
}
#screen-navigator .nav-route-month{
  font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.01em;
}
#screen-navigator .nav-route-wave{ position:relative;width:100%;height:104px; }
#screen-navigator #nav-route-svg{ display:block;width:100%;height:100%; }
#screen-navigator .nav-route-right{ display:flex;justify-content:flex-end; }
#screen-navigator .nav-route-toggle,
#screen-navigator .nav-boost{ white-space:nowrap;min-width:150px;justify-content:center; }

/* Узлы и сегменты маршрута */
#screen-navigator .nav-route-node{ cursor:default; }
#screen-navigator .nav-route-node.is-past{ cursor:pointer; }
#screen-navigator .nav-route-node.--green{ fill:var(--success); }
#screen-navigator .nav-route-node.--warn{ fill:var(--warn); }
#screen-navigator .nav-route-node.--danger{ fill:var(--danger); }
#screen-navigator .nav-route-node.--future{ fill:var(--muted);opacity:.5; }
#screen-navigator .nav-route-seg{ fill:none;stroke-width:2.5;stroke-linecap:round; }
#screen-navigator .nav-route-seg.--green{ stroke:var(--success); }
#screen-navigator .nav-route-seg.--warn{ stroke:var(--warn); }
#screen-navigator .nav-route-seg.--danger{ stroke:var(--danger); }
#screen-navigator .nav-route-seg.--future{ stroke:var(--muted);opacity:.45;stroke-dasharray:4 4; }

/* Маркер «сейчас» */
#screen-navigator .nav-route-now{
  fill:var(--accent);filter:drop-shadow(0 0 6px var(--accent));
}

/* Звезда финиша */
#screen-navigator .nav-route-finish{ fill:var(--text-2); }

/* Tooltip */
#screen-navigator .nav-route-tooltip{
  position:absolute;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text);
  box-shadow:var(--shadow-sm);pointer-events:none;transform:translate(-50%,-100%);
  white-space:nowrap;z-index:5;
}

@media (max-width:900px){
  #screen-navigator .nav-route-row{ grid-template-columns:1fr;text-align:left; }
  #screen-navigator .nav-route-right{ justify-content:flex-start; }
}

/* ═════ Грид нижнего ряда: Кокпит | Панель задач ═════ */
#screen-navigator .nav-bottom-grid{
  display:grid;gap:20px;
  grid-template-columns:1fr;            /* default = is-collapsed */
}
#screen-navigator .nav-bottom-grid.is-open{
  grid-template-columns:minmax(0,1fr) minmax(280px,380px);
}
#screen-navigator .nav-bottom-grid.is-collapsed > .nav-tasks{ display:none; }

/* Адаптив: на узком экране при is-open панель — под Кокпит */
@media (max-width:1100px){
  #screen-navigator .nav-bottom-grid.is-open{ grid-template-columns:1fr; }
}

/* ═════ БЛОК 2 · Кокпит (стиль V100) ═════ */
#screen-navigator #nav-cockpit{ padding:22px 24px; }

/* Чипы периода — по центру, как панель приборов */
#screen-navigator .nav-period-chips{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px;
}
#screen-navigator .nav-period-chips .chip.--period{
  font-family:inherit;border:0;cursor:pointer;
}

/* Сцена приборов: 2 больших спидометра + средний fuel-gauge */
#screen-navigator .nav-cockpit-stage{
  display:grid;grid-template-columns:1fr 0.58fr 1fr;gap:18px;align-items:center;
}
@media (max-width:720px){
  #screen-navigator .nav-cockpit-stage{ grid-template-columns:1fr; }
}
#screen-navigator .nav-spd-card{ display:flex;flex-direction:column;align-items:center;gap:14px; }
#screen-navigator .nav-spd{ width:100%;max-width:340px; }

/* ── Спидометр ── */
#screen-navigator .nav-spd-svg{ display:block;width:100%;height:auto;overflow:visible; }
#screen-navigator .nav-spd-track{ fill:none;stroke:var(--border);stroke-width:6.5;stroke-linecap:round; }
#screen-navigator .nav-spd-fill{
  fill:none;stroke:var(--spd-color,var(--success));stroke-width:6.5;stroke-linecap:round;
  filter:drop-shadow(0 0 2px var(--spd-color,var(--success))) drop-shadow(0 0 5px var(--spd-color,var(--success)));
  transition:stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1);
}
#screen-navigator .nav-spd-tick{ stroke:var(--border);stroke-width:1.4;stroke-linecap:round; }
#screen-navigator .nav-spd-tick.is-major{ stroke:var(--muted);stroke-width:2.2; }
#screen-navigator .nav-spd-tick.is-lit{ stroke:var(--text);opacity:.8; }
#screen-navigator .nav-spd-label{ fill:var(--muted);font-weight:700;font-size:11px;text-anchor:middle;dominant-baseline:middle; }
#screen-navigator .nav-spd-dot{
  fill:var(--spd-color,var(--success));opacity:0;transition:opacity .3s ease .75s;
  filter:drop-shadow(0 0 4px var(--spd-color,var(--success))) drop-shadow(0 0 9px var(--spd-color,var(--success)));
}
#screen-navigator .nav-spd-dot.is-on{ opacity:1; }
#screen-navigator .nav-spd-val{ fill:var(--text);font-weight:700;font-size:32px;letter-spacing:-.02em; }
#screen-navigator .nav-spd-unit{ fill:var(--muted);font-weight:700;font-size:10px; }
#screen-navigator .nav-spd-cap{ fill:var(--muted);font-weight:700;font-size:7px;letter-spacing:.04em;text-anchor:middle; }

/* ── Средний блок: контракты стек-баром ── */
#screen-navigator .nav-contracts-card{
  display:flex;flex-direction:column;justify-content:center;gap:16px;align-self:center;width:100%;
}
#screen-navigator .nav-contracts-head{ display:flex;align-items:baseline;justify-content:space-between;gap:8px; }
#screen-navigator .nav-contracts-title{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
#screen-navigator .nav-contracts-total{ font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.02em; }
#screen-navigator .nav-contracts-bar{
  display:flex;width:100%;height:24px;border-radius:8px;overflow:hidden;gap:2px;
}
#screen-navigator .nav-cbar-seg{
  display:flex;align-items:center;justify-content:center;min-width:16px;
  font-size:12px;font-weight:700;color:#0B1220;
}
#screen-navigator .nav-cbar-seg.--green{ background:var(--success); }
#screen-navigator .nav-cbar-seg.--warn{ background:var(--warn); }
#screen-navigator .nav-cbar-seg.--danger{ background:var(--danger); }
#screen-navigator .nav-contracts-legend{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px; }
#screen-navigator .nav-contracts-legend li{ display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text); }
#screen-navigator .nav-contracts-legend li i{ width:9px;height:9px;border-radius:50%;flex:none; }
#screen-navigator .nav-contracts-legend li b{ font-weight:700;min-width:18px; }
#screen-navigator .nav-contracts-legend li span{ color:var(--muted);font-weight:600; }
#screen-navigator .nav-contracts-legend li.--green i{ background:var(--success); }
#screen-navigator .nav-contracts-legend li.--warn i{ background:var(--warn); }
#screen-navigator .nav-contracts-legend li.--danger i{ background:var(--danger); }

/* ═════ ПАНЕЛЬ · Маршрут задач ═════ */
#screen-navigator .nav-tasks{
  background:var(--surface);border:1px solid var(--border-2);border-radius:18px;
  box-shadow:var(--shadow);padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
#screen-navigator .nav-tasks-head{ display:flex;flex-direction:column;gap:4px; }
#screen-navigator .nav-tasks-title{ font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em; }
#screen-navigator .nav-tasks-sub{ font-size:12px;color:var(--muted);font-weight:500; }
#screen-navigator .nav-tasks-list{ display:flex;flex-direction:column;gap:8px; }
#screen-navigator .nav-task-card{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px;
  padding:10px 12px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#screen-navigator .nav-task-card:hover{
  transform:translateY(-1px);border-color:var(--border);box-shadow:var(--shadow-sm);
}
#screen-navigator .nav-task-card.is-hidden{ display:none; }
#screen-navigator .nav-task-dot{ width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px; }
#screen-navigator .nav-task-dot.--red{    background:var(--danger); }
#screen-navigator .nav-task-dot.--yellow{ background:var(--warn); }
#screen-navigator .nav-task-dot.--green{  background:var(--success); }
#screen-navigator .nav-task-text{ font-size:13px;line-height:1.45;color:var(--text); }
#screen-navigator .nav-tasks-more{
  align-self:stretch;
  margin-top:4px;background:transparent;border:1px dashed var(--border);
  color:var(--text-2);font-weight:600;font-size:12.5px;padding:8px 12px;border-radius:10px;
  cursor:pointer;transition:color .12s, border-color .12s, background .12s;
}
#screen-navigator .nav-tasks-more:hover{ color:var(--text);border-color:var(--text-2);background:var(--surface-3); }
#screen-navigator .nav-tasks-foot{ display:flex;gap:8px;margin-top:4px; }
#screen-navigator .nav-tasks-foot .nav-tasks-more{ flex:1;align-self:auto;margin-top:0; }
#screen-navigator .nav-tasks-foot .nav-tasks-more.is-hidden{ display:none; }

/* ═════ МОДАЛКА Навигатора (паттерн #op-nav-modal Оперативки, изолированная инстанция) ═════ */
#screen-navigator #nav-agent-modal{
  position:fixed;inset:0;z-index:90;
  display:none;align-items:center;justify-content:center;padding:24px;
}
#screen-navigator #nav-agent-modal.is-open{ display:flex; }
#screen-navigator #nav-agent-modal[hidden]{ display:none !important; }
#screen-navigator #nav-agent-modal .nav-modal-ov{
  position:absolute;inset:0;background:var(--nav-overlay);backdrop-filter:blur(2px);cursor:pointer;
}
#screen-navigator #nav-agent-modal .nav-modal-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:22px 22px 18px;max-width:520px;width:100%;
  display:flex;flex-direction:column;gap:14px;
}
#screen-navigator #nav-agent-modal .nav-modal-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent-ink);text-transform:uppercase;
}
#screen-navigator #nav-agent-modal .nav-modal-quote{
  font-size:15px;line-height:1.5;color:var(--text);
  background:var(--surface-2);border-left:3px solid var(--accent);border-radius:6px;
  padding:12px 14px;font-weight:500;
}
#screen-navigator #nav-agent-modal .nav-modal-btns{ display:flex;gap:10px; }
#screen-navigator #nav-agent-modal .nav-modal-btns > *{ flex:1; }
#screen-navigator #nav-agent-modal .nav-modal-cancel{
  background:transparent;border:0;color:var(--muted);font-weight:600;font-size:13px;
  padding:8px;cursor:pointer;align-self:center;
}
#screen-navigator #nav-agent-modal .nav-modal-cancel:hover{ color:var(--text-2); }

/* ═════ СОСТОЯНИЕ ЗАГРУЗКИ · скелетоны (фидбэк Романа 2026-06-18) ═════ */
@keyframes nav-shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }
#screen-navigator .nav-skel,
#screen-navigator.is-loading .nav-route-month,
#screen-navigator.is-loading .nav-route-wave,
#screen-navigator.is-loading .nav-spd,
#screen-navigator.is-loading .nav-contracts-bar,
#screen-navigator.is-loading .nav-contracts-total,
#screen-navigator.is-loading .nav-contracts-legend li b{
  border-radius:8px;
  background:linear-gradient(90deg,var(--surface-2) 0%,var(--border) 45%,var(--surface-2) 90%);
  background-size:460px 100%;
  animation:nav-shimmer 1.15s linear infinite;
  color:transparent !important;          /* прячем любой текст под скелетоном */
}
/* габариты скелетонов под реальные блоки */
#screen-navigator.is-loading .nav-route-month{ width:180px;height:20px;display:inline-block; }
#screen-navigator.is-loading .nav-route-wave{ height:104px; }
#screen-navigator.is-loading .nav-spd{ min-height:200px; }
#screen-navigator.is-loading .nav-contracts-total{ width:42px;height:22px;display:inline-block;border-radius:6px; }
#screen-navigator.is-loading .nav-contracts-legend li b{ width:26px;height:13px;display:inline-block;border-radius:4px; }
/* в загрузке прячем «живые» элементы, которые иначе мелькают пустыми */
#screen-navigator.is-loading .nav-spd-card .nav-boost,
#screen-navigator.is-loading .nav-route-toggle{ visibility:hidden; }
/* скелет-карточки панели «Маршрут задач» (инжектятся JS) */
#screen-navigator .nav-skel-card{ height:46px;border-radius:10px; }
#screen-navigator .nav-skel-line{ height:18px; }

/* ═════ СОСТОЯНИЕ ОШИБКИ загрузки ═════ */
#screen-navigator .nav-error{
  display:none;flex-direction:column;align-items:center;gap:12px;
  padding:40px 24px;text-align:center;color:var(--muted);
}
#screen-navigator.is-error .nav-error{ display:flex; }
#screen-navigator .nav-error-msg{ font-size:14px;font-weight:600;color:var(--text-2); }
#screen-navigator .nav-error-retry{
  background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer;
}
#screen-navigator .nav-error-retry:hover{ filter:brightness(1.06); }
/* при ошибке прячем блоки, показываем только сообщение */
#screen-navigator.is-error > .block-card,
#screen-navigator.is-error > .nav-bottom-grid{ display:none; }