/* Орбита — прикладной слой поверх Orbit Kit. Токены, цвета и шрифты берутся из кита. */

:root { --appbar-h: 3.5rem; --runbar-h: 0px; }
html { scroll-padding-top: calc(var(--appbar-h) + var(--runbar-h) + 1rem); }
body { font-feature-settings: 'tnum' 1, 'cv11' 1; }
body.is-busy { cursor: progress; }
.muted { color: var(--text-2); }
.t-caption.muted { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.mono { font: var(--t-mono); }

/* ---------- верхняя панель ---------- */
.appbar { position: sticky; top: 0; z-index: var(--z-nav); height: var(--appbar-h); display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gutter); background: color-mix(in oklab, var(--bg-page) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--border); }
.brand { gap: .5rem; }
.brand__name { font: italic 400 1.6rem/1 var(--font-display); letter-spacing: 0; }
.brand__mark svg { display: block; }
.appnav { display: flex; gap: .125rem; overflow-x: auto; scrollbar-width: none; flex: 1 1 0; min-width: 0; justify-content: flex-start; padding: .25rem; }
.appnav__link { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; border-radius: var(--r-pill); color: var(--text-2);
  font: var(--t-label); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.appnav__link .icon { width: 1rem; height: 1rem; opacity: .8; }
.appnav__link:hover { color: var(--text); background: var(--bg-subtle); }
.appnav__link[aria-current="page"] { color: var(--on-accent); background: var(--accent); box-shadow: var(--shadow-glow); }
.appbar__end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.runchip { display: inline-flex; align-items: center; gap: .5rem; max-width: 13rem; padding: .3rem .75rem; border-radius: var(--r-pill);
  background: var(--bg-surface); border: 1px solid var(--border); font: var(--t-caption); text-decoration: none; color: var(--text-2); }
.runchip span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runchip b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 62rem) { .brand__name, .appnav__link span { display: none; } .runchip span:nth-child(2) { display: none; } .appnav { justify-content: flex-start; } .appnav__link { padding: .5rem .65rem; } }
@media (max-width: 40rem) { .appbar { gap: .5rem; } }

.appfoot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 2rem 3rem; font: var(--t-caption); color: var(--text-3); }

.view-in { animation: view-in .45s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- панель управления ходом ---------- */
.runbar-wrap { position: sticky; top: var(--appbar-h); z-index: calc(var(--z-nav) - 1); background: color-mix(in oklab, var(--bg-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-1); }
.runbar { display: grid; gap: .5rem; padding-block: .625rem; }
.runbar__top { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.runbar__label { font: var(--t-body-sm); min-width: 0; }
.runbar__time { color: var(--text-2); font-variant-numeric: tabular-nums; }
.runbar__spacer { flex: 1; }
.runbar__controls { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; }
.runbar__to { width: 5.5rem; min-height: var(--control-h-sm); }
.runbar__algo { min-height: var(--control-h-sm); width: auto; max-width: 16rem; font: var(--t-caption); }
.runbar__track { position: relative; height: .375rem; border-radius: var(--r-pill); background: var(--bg-subtle); overflow: hidden; }
.runbar__track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: inherit; transition: width var(--dur-slow) var(--ease-out); }
.runbar-wrap[data-playing="1"] .runbar__track i { background-size: 200% 100%; animation: kit-shimmer 1.6s linear infinite; background-image: linear-gradient(90deg, var(--accent), var(--accent-soft), var(--accent)); }
.runbar .seg__btn { min-height: 1.75rem; padding: 0 .7rem; font-size: .8125rem; }
.runbar .btn--sm { min-height: 2rem; }
.queue-count { font-variant-numeric: tabular-nums; }

/* ---------- страницы ---------- */
.page { padding-block: 1.75rem 3rem; display: grid; gap: 1.25rem; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-head .t-display { margin-top: .125rem; }
.lead-note { max-width: 62rem; font: var(--t-body-sm); }
.kpi-grid { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 62rem) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } }
.shift-bottom { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 68rem) { .shift-bottom { grid-template-columns: minmax(0, 1fr); } }
.tabs__list { flex-wrap: wrap; }
.kpi { border-radius: 1.25rem; }
.kpi__value { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.kpi__status { min-height: 1.1em; }
.shift-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 2.1fr) minmax(19rem, 1fr); align-items: start; }
@media (max-width: 68rem) { .shift-grid { grid-template-columns: minmax(0, 1fr); } }
.card__title { letter-spacing: var(--ls-tight); }
.card > .card__head + * { min-width: 0; }

/* ---------- герой ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #000; color: var(--text); }
.hero__bg { z-index: -1; }
.hero__inner { position: relative; display: grid; gap: 2.5rem; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 62rem) { .hero__inner { grid-template-columns: minmax(0, 1fr); } }
.hero__title { font: 300 clamp(2.5rem, 1.2rem + 5.6vw, 5.2rem)/1.02 var(--font-sans); letter-spacing: var(--ls-hero); margin: .75rem 0 1rem; text-wrap: balance; }
.hero__title .serif-i { color: var(--accent-text); }
.hero__lead { max-width: 40rem; color: var(--text-2); }
.hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--r-card); background: color-mix(in oklab, var(--bg-surface) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero__stats .stat__value { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); color: var(--text); }
.resume { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 1.25rem; }
.resume > div { flex: 1; }
.resume .icon--lg { color: var(--accent); }

.home-sec { padding-block: 2.25rem 0; display: grid; gap: 1.25rem; }
.home-sec:last-child { padding-bottom: 4rem; }
.home-sec__head { display: flex; gap: 1rem; align-items: start; }
.step-no { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 600 1rem/1 var(--font-sans); flex: none; margin-top: .25rem; box-shadow: var(--shadow-glow); }
.scn-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.scn { display: grid; gap: .625rem; text-align: left; align-content: start; cursor: pointer; --pad: 1.25rem; }
.scn.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-glow); }
.scn__check { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.scn__check .icon { width: .9rem; height: .9rem; stroke-width: 3; }
.scn__title { font: var(--t-h2); }
.scn__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--text-2); font: var(--t-body-sm); }
.scn__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.scn__nums b { display: block; font-variant-numeric: tabular-nums; font-size: .95rem; }
.scn__nums span { font: var(--t-caption); color: var(--text-3); }
.scn--upload { border-style: dashed; place-items: center; text-align: center; justify-items: center; align-content: center; color: var(--text-2); box-shadow: none; }
.scn--upload:hover { border-color: var(--accent); color: var(--accent-text); }
.prio-bar { display: flex; height: .5rem; border-radius: var(--r-pill); overflow: hidden; background: var(--bg-subtle); gap: 2px; }
.prio-bar i { display: block; min-width: 2px; }
.edit-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); margin-top: 1rem; }
.edit .input--num { width: 5.5rem; }
.edit { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg-subtle); align-content: start; }
.edit h4 { font: var(--t-label); }
.edit .select, .edit .input { width: auto; min-width: 5rem; }
.edit .range { min-width: 8rem; flex: 1; }
.goal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.goal { display: grid; gap: .5rem; text-align: left; cursor: pointer; align-content: start; }
.goal .icon--lg { color: var(--accent-text); }
.goal.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-glow); background: var(--accent-tint); }
.start-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: linear-gradient(135deg, var(--accent-tint), var(--bg-surface)); }

/* ---------- чипы, фильтры ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-2); font: var(--t-caption); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip__n { font-variant-numeric: tabular-nums; opacity: .75; }
.chip--rm { padding-right: .25rem; }
.chip__x { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; color: inherit; }
.chip__x:hover { background: rgb(255 255 255 / .25); }
.chip__x .icon { width: .75rem; height: .75rem; }
.filters { display: grid; gap: .625rem; grid-template-columns: minmax(12rem, 2fr) repeat(4, minmax(8rem, 1fr)); --pad: .75rem; }
@media (max-width: 60rem) { .filters { grid-template-columns: repeat(2, 1fr); } }
.json-preview { margin: 0; padding: .75rem 1rem; max-height: 14rem; overflow: auto; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-field); font: var(--t-mono); white-space: pre-wrap; word-break: break-word; }
.job-row { --pad: 1rem; }

/* ---------- расписание ---------- */
.gantt { position: relative; width: 100%; overflow: hidden; border-radius: var(--r-field); }
.gantt__canvas { display: block; width: 100%; }
.gantt__tip { position: absolute; z-index: 5; pointer-events: none; padding: .4rem .65rem; border-radius: var(--r-chip); background: var(--bg-inverse); color: var(--text-inverse); font: var(--t-caption); box-shadow: var(--shadow-2); white-space: nowrap; }
.gantt__hint { opacity: .65; font-size: .6875rem; }
.chart-wrap { position: relative; }
.chart-tip { position: absolute; z-index: 4; pointer-events: none; min-width: 8rem; padding: .4rem .6rem; border-radius: var(--r-chip); background: var(--bg-inverse); color: var(--text-inverse); font: var(--t-caption); box-shadow: var(--shadow-2); }
.chart-tip__t { opacity: .7; margin-bottom: .125rem; }
.chart-tip__row { display: flex; align-items: center; gap: .375rem; white-space: nowrap; }
.chart-tip__row i { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.legend i { display: inline-block; }

/* ---------- оповещения и журнал ---------- */
.alert-line, .ok-line { display: flex; gap: .5rem; align-items: start; padding: .5rem .75rem; border-radius: var(--r-field); font: var(--t-body-sm); }
.alert-line .icon, .ok-line .icon { margin-top: .15rem; }
.alert-line--bad { background: var(--danger-tint); color: var(--text); } .alert-line--bad .icon { color: var(--danger); }
.alert-line--warn { background: var(--warning-tint); } .alert-line--warn .icon { color: var(--warning); }
.alert-line--info { background: var(--info-tint); } .alert-line--info .icon { color: var(--info); }
.ok-line { background: var(--success-tint); } .ok-line .icon { color: var(--success); }
.timeline { display: grid; gap: .5rem; max-height: 16rem; overflow: auto; }
.tl { display: grid; grid-template-columns: 4.5rem 1fr; gap: .5rem; font: var(--t-body-sm); padding-left: .75rem; border-left: 2px solid var(--border-strong); }
.tl--event { border-color: var(--accent); } .tl--rej { border-color: var(--danger); } .tl--goal { border-color: var(--cat-teal); }
.tl__step { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: .75rem; padding-top: .1rem; }

/* ---------- бары ---------- */
.bars__fill { transform-origin: 0 50%; }
.bars__fill.is-warn { background: var(--warning); } .bars__fill.is-muted { background: var(--border-strong); } .bars__fill.is-ghost { background: repeating-linear-gradient(135deg, var(--border-strong) 0 4px, transparent 4px 8px); }
.progress.is-warn > i { background: var(--warning); } .progress.is-bad > i { background: var(--danger); }
.jprog { position: relative; height: 1.25rem; min-width: 5.5rem; border-radius: var(--r-pill); background: var(--bg-subtle); overflow: hidden; }
.jprog i { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); }
.jprog span { position: relative; display: block; text-align: center; font: 600 .6875rem/1.25rem var(--font-sans); }

/* ---------- аппараты ---------- */
.sat-grid { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.sat { --pad: 1rem; display: grid; gap: .5rem; text-align: left; cursor: pointer; border-radius: 1.25rem; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); }
.sat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sat.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.sat--low { border-color: color-mix(in oklab, var(--warning) 60%, var(--border)); }
.sat--critical { border-color: var(--danger); }
.sat--down { opacity: .8; background: repeating-linear-gradient(135deg, var(--bg-surface) 0 8px, var(--bg-subtle) 8px 16px); }
.sat__top { display: flex; justify-content: space-between; align-items: center; }
.sat__id { font: 600 1.15rem/1 var(--font-sans); letter-spacing: var(--ls-tight); }
.sat__row { display: flex; justify-content: space-between; font: var(--t-body-sm); }
.sat__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.is-cold { color: var(--info); } .is-hot { color: var(--danger); }
.sat__foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .125rem; }
.sat__act { font: 600 .75rem/1 var(--font-sans); padding: .25rem .5rem; border-radius: var(--r-chip); background: var(--bg-subtle); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8rem; }
.act-job { background: var(--info-tint); color: var(--info); }
.act-calibrate { background: var(--violet-tint); color: var(--cat-violet); }
.ring { flex: none; }

/* ---------- таблицы ---------- */
.table-wrap { background: var(--bg-surface); }
.row-click { cursor: pointer; }
.row-bad td { background: var(--danger-tint); }
.table td, .table th { vertical-align: middle; }
.table--cmp .is-win { color: var(--success); font-weight: 600; background: var(--success-tint); }
.table--cmp tr.is-main td { background: var(--accent-tint); }
.table--cmp td:first-child { min-width: 11rem; }
.linklike { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; padding: 0; }
.linklike:hover { text-decoration-thickness: 2px; }

/* ---------- разбор решения ---------- */
.drawer { width: min(30rem, 94vw); }
.decision-hero { padding: 1rem 1.25rem; border-radius: var(--r-field); background: var(--bg-subtle); display: grid; gap: .5rem; }
.decision-hero__act { font: var(--t-h1); }
.decision-hero__act.act-job { color: var(--info); background: none; } .decision-hero__act.act-calibrate { color: var(--cat-violet); background: none; }
.kv { display: grid; gap: .375rem; }
.kv__row { display: flex; justify-content: space-between; gap: 1rem; padding: .375rem 0; border-bottom: 1px dashed var(--border); font: var(--t-body-sm); }
.kv__k { color: var(--text-2); } .kv__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.constraint { display: flex; gap: .625rem; padding: .5rem .75rem; border-radius: var(--r-field); background: var(--bg-subtle); }
.constraint .icon { margin-top: .2rem; color: var(--success); }
.constraint.is-active { background: var(--warning-tint); } .constraint.is-active .icon { color: var(--warning); }
.alt { padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--r-field); display: grid; gap: .25rem; }
.bullets { padding-left: 1.1rem; display: grid; gap: .375rem; font: var(--t-body-sm); }
.wbar { display: grid; gap: 2px; }
.wcell { display: block; height: 1.25rem; border-radius: 3px; background: var(--bg-subtle); }
.wcell.is-work { background: var(--accent); } .wcell.is-blocked { background: var(--warning); } .wcell.is-planned { background: var(--info); opacity: .55; }
.wcell.is-future:not(.is-work) { opacity: .5; }

/* ---------- анализ ---------- */
.cause > summary { display: grid; grid-template-columns: 1fr auto auto auto; gap: .75rem; align-items: center; }
.cause > summary::after { margin-left: 0; }
.cause__title { font-weight: 600; } .cause__n { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cause-list { display: grid; gap: .5rem; }

/* ---------- сравнение ---------- */
.variant { position: relative; display: grid; gap: .75rem; border-top: 4px solid var(--vc); }
.variant__letter { position: absolute; right: 1rem; top: .75rem; font: italic 400 2.5rem/1 var(--font-display); color: var(--vc); opacity: .8; }
.verdict { padding: 1rem 1.25rem; font-size: 1rem; } .verdict p { margin-top: .25rem; }
.cli { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .5rem .5rem 1rem; background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--r-field); overflow-x: auto; }
.cli code { white-space: nowrap; color: inherit; }
.cli .btn { color: var(--text-inverse); }
.saved { --pad: .875rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.saved.is-on { border-color: var(--accent); }
.empty { display: grid; gap: .75rem; justify-items: center; text-align: center; padding: 3rem 1rem; max-width: 34rem; margin-inline: auto; }
.empty__orbit { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-text); }

/* ---------- мелочи ---------- */
.chart { display: block; }
.stat-row .stat { min-width: 8rem; }
dialog.dialog .field { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .view-in { animation: none; } }
@media print { .appbar, .runbar-wrap, .appfoot { display: none; } }

@media (max-width: 48rem) {
  .runbar-wrap { position: static; }
  .runbar__controls { gap: .5rem; }
  .page { padding-block: 1rem 2rem; }
  .hero__title { font-size: clamp(2.2rem, 1rem + 8vw, 3.4rem); }
}

/* вкладки: подчёркивание активной не должно обрезаться контейнером прокрутки */
.tabs__tab::after { bottom: 0; height: 3px; }
.tabs__tab[aria-selected="true"] { color: var(--accent-text); font-weight: 600; }