/* =====================================================================
   YESOD · SIMULATION STYLE  (префикс sx-)
   «Система поддержания симуляций» — то, что стоит за виртуальным миром.

   Принципы
   1. Монохром. Белый на почти-чёрном; единственный акцент — тревожный красный.
   2. Линия, а не заливка. Рамки 1px, иконки — тонкий контур, подсветка = свечение линии.
   3. Заглавные с широким трекингом — для заголовков и статусов; данные — моноширинные.
   4. Состояние читается без цвета: форма + медленное «дыхание» (online — ровно, degraded — дышит, offline — красный).
   5. Эффекты минимальны: еле заметные вертикальные полосы + виньетка. Без шума, дрожания и RGB-сдвига.
   6. Выбор подтверждается одним мягким «включением» (~0.5 с, плавное проявление из полутени) — .sx-blink-once.

   Подключение:  <html class="sx">  +  simulation.css  (+ sx.js и папка icons/ при необходимости)
   Темы:         <html data-theme="inverse">  — светлая «аварийная» тема (референсы 2 и 5)
   Полосы:       <html data-stripes="off">    — выключить текстуру
   ===================================================================== */

/* ---------- токены ---------- */
:root {
  --sx-bg: #0a0a0b;
  --sx-bg-2: #151516;
  --sx-surface: rgba(255, 255, 255, .025);
  --sx-surface-hi: rgba(255, 255, 255, .06);
  --sx-line: rgba(255, 255, 255, .26);
  --sx-line-hi: rgba(255, 255, 255, .88);
  --sx-fg: rgba(255, 255, 255, .88);
  --sx-dim: rgba(255, 255, 255, .78);   /* подписи, подсказки, теги: .6 читалось плохо */
  --sx-faint: rgba(255, 255, 255, .22);
  --sx-alert: #d9585c;
  --sx-alert-soft: rgba(217, 88, 92, .14);
  --sx-on-alert: #fff;
  --sx-on-fg: #0a0a0b;          /* цвет текста на инвертированной («выбранной») плашке */
  --sx-glow: 0 0 10px rgba(255, 255, 255, .5);
  --sx-stripe: rgba(255, 255, 255, .03);
  /* те же цвета тройками rgb — для canvas и для rgba(var(--sx-ink-rgb), .3) */
  --sx-ink-rgb: 255, 255, 255;
  --sx-bg-rgb: 10, 10, 11;
  --sx-alert-rgb: 217, 88, 92;

  --sx-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Frutiger, Arial, sans-serif; /* без «Segoe UI Light»: тонкий штрих утомляет */
  --sx-mono: Consolas, "Cascadia Mono", "SF Mono", monospace;
  --sx-track: .42em;            /* трекинг заголовков */

  --sx-gap: 16px;
  --sx-blink: 520ms;
}

:root[data-theme="inverse"] {
  --sx-bg: #e7e7e7;
  --sx-bg-2: #d6d6d6;
  --sx-surface: rgba(0, 0, 0, .04);
  --sx-surface-hi: rgba(0, 0, 0, .09);
  --sx-line: rgba(0, 0, 0, .42);
  --sx-line-hi: #101010;
  --sx-fg: #101010;
  --sx-dim: rgba(0, 0, 0, .78);
  --sx-faint: rgba(0, 0, 0, .26);
  --sx-on-fg: #e7e7e7;
  --sx-glow: none;
  --sx-stripe: rgba(0, 0, 0, .055);
  --sx-ink-rgb: 16, 16, 16;
  --sx-bg-rgb: 231, 231, 231;
}

/* ---------- основа ---------- */
.sx, .sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx {
  margin: 0; min-height: 100%;
  color: var(--sx-fg);
  font: 400 15px/1.55 var(--sx-font);
  background: radial-gradient(ellipse at 50% 38%, var(--sx-bg-2) 0%, var(--sx-bg) 78%) fixed;
}
.sx body { margin: 0; min-height: 100vh; background: transparent; }
/* вертикальные полосы дисплея — единственная «ретро»-текстура */
.sx body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--sx-stripe) 0 1px, transparent 1px 3px);
}
:root[data-stripes="off"] body::before { display: none; }
.sx [hidden] { display: none !important; }
.sx ::selection { background: var(--sx-fg); color: var(--sx-bg); }
.sx a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sx-line); }
.sx a:hover { border-bottom-color: var(--sx-line-hi); }
.sx :focus-visible { outline: 1px dashed var(--sx-line-hi); outline-offset: 3px; }

/* ---------- типографика ---------- */
.sx-title, .sx-eyebrow {
  margin: 0; font-weight: 300; text-transform: uppercase; letter-spacing: var(--sx-track);
  margin-right: calc(-1 * var(--sx-track));     /* компенсация хвостового трекинга при центрировании */
}
.sx-title { font-size: 22px; }
.sx-title--xl { font-size: clamp(22px, 4vw, 40px); }
.sx-eyebrow { font-size: 12px; color: var(--sx-dim); letter-spacing: .3em; }
.sx-dim { color: var(--sx-dim); }
.sx-mono { font-family: var(--sx-mono); font-weight: 400; }
.sx-num { font-family: var(--sx-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.sx-bracket::before { content: "[ "; color: var(--sx-dim); }
.sx-bracket::after  { content: " ]"; color: var(--sx-dim); }

/* строки терминала: «> команда» */
.sx-cmd { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
.sx-cmd > .sx-ln { display: block; }
.sx-cmd > .sx-ln::before { content: "> "; color: var(--sx-dim); }
.sx-cmd > .sx-ln--plain::before { content: none; }
.sx-cmd > .sx-ln--sub { padding-left: 1.6em; }
.sx-cmd > .sx-ln--err { color: var(--sx-alert); }
.sx-cursor::after { content: "_"; animation: sx-loop 1.2s ease-in-out infinite; }

/* ---------- линии и разделители ---------- */
.sx-rule { height: 0; margin: var(--sx-gap) 0; border: 0; border-top: 1px solid var(--sx-line); }
.sx-rule--hi { border-top-color: var(--sx-line-hi); box-shadow: var(--sx-glow); }

/* полоса-баннер между двумя светлыми линиями (референс 4) */
.sx-band {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 24px;
  border-block: 1px solid var(--sx-line-hi);
  box-shadow: 0 -1px 8px -2px var(--sx-faint), 0 1px 8px -2px var(--sx-faint);
}
/* красная плашка «[ Access Denied ]» (референс 2) */
.sx-band--alert {
  background: var(--sx-alert); color: var(--sx-on-alert); border-block-color: transparent; box-shadow: none;
}
.sx-band--alert .sx-title { letter-spacing: .5em; }

/* ---------- панель ---------- */
.sx-panel {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--sx-line); background: var(--sx-surface);
}
/* угловые засечки — отсылка к кубу-логотипу */
.sx-panel::before, .sx-panel::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 0 solid var(--sx-line-hi);
}
.sx-panel::before { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.sx-panel::after  { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.sx-panel__head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--sx-line);
}
.sx-panel__head .sx-eyebrow { flex: 1; margin-right: 0; }
.sx-panel__body { padding: 14px; min-height: 0; }
.sx-panel--alert { border-color: var(--sx-alert); background: var(--sx-alert-soft); }
.sx-panel--alert::before, .sx-panel--alert::after { border-color: var(--sx-alert); }

/* ---------- иконки (файлы icons/*.svg; <svg class="sx-icon" data-icon="server"></svg>, подставляет sx.js) ---------- */
.sx-icon {
  width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: miter; stroke-linecap: square;
}
.sx-icon--sm { width: 1em; height: 1em; }
.sx-icon--lg { width: 2em; height: 2em; stroke-width: 1; }
.sx-icon--xl { width: 64px; height: 64px; stroke-width: .9; }
.sx-icon--glow { filter: drop-shadow(0 0 4px var(--sx-faint)) drop-shadow(0 0 1px var(--sx-line-hi)); }
.sx-icon--dim { color: var(--sx-dim); }
.sx-icon--alert { color: var(--sx-alert); }
.sx-logo { width: 44px; height: 44px; fill: currentColor; stroke: none; filter: drop-shadow(0 0 6px var(--sx-faint)); }  /* логотип — заливка, не контур */

/* кнопка питания с кольцевым свечением (референс 7) */
.sx-power { display: inline-grid; place-items: center; width: 64px; height: 64px; color: var(--sx-fg); }
.sx-power .sx-icon { width: 100%; height: 100%; stroke-width: 2.6; filter: drop-shadow(0 0 7px rgba(255, 255, 255, .8)); }
:root[data-theme="inverse"] .sx-power .sx-icon { filter: none; }

/* ---------- метки и состояния ---------- */
.sx-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; height: 22px;
  border: 1px solid var(--sx-line); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sx-dim);
  white-space: nowrap;
}
.sx-tag--hi { border-color: var(--sx-line-hi); color: var(--sx-fg); }
.sx-tag--alert { border-color: var(--sx-alert); color: var(--sx-alert); }
.sx-tag--solid { background: var(--sx-fg); border-color: var(--sx-fg); color: var(--sx-on-fg); }

/* состояние ноды: data-state на любом контейнере */
[data-state="degraded"] .sx-state { animation: sx-loop 2.2s ease-in-out infinite; }
[data-state="offline"] { --sx-state-c: var(--sx-alert); }
[data-state="offline"] .sx-state, [data-state="offline"] .sx-tag--state { color: var(--sx-alert); border-color: var(--sx-alert); }
.sx-led { width: 8px; height: 8px; flex: none; background: currentColor; box-shadow: 0 0 6px currentColor; }
[data-state="offline"] .sx-led { background: transparent; box-shadow: none; border: 1px solid currentColor; }

/* ---------- метр (референс 6: тонкая линия с «параллелограммами» на концах) ---------- */
.sx-meter { --v: 0; position: relative; display: block; height: 8px; margin: 6px 0; }
.sx-meter::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--sx-line); }
.sx-meter > i {
  position: absolute; left: 0; top: 1px; bottom: 1px; width: calc(var(--v) * 100%);
  background: var(--sx-line-hi); box-shadow: var(--sx-glow);
  clip-path: polygon(0 100%, 6px 0, 100% 0, calc(100% - 6px) 100%);
  transition: width .6s cubic-bezier(.2, .6, .3, 1);
}
.sx-meter--alert > i { background: var(--sx-alert); box-shadow: none; }
.sx-meter--thin { height: 4px; }
.sx-meter--thin > i { top: 0; bottom: 0; clip-path: none; }

/* ---------- ключ–значение ---------- */
.sx-kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; margin: 0; }
.sx-kv dt { color: var(--sx-dim); }
.sx-kv dd { margin: 0; text-align: right; font-family: var(--sx-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.sx-kv dd.is-alert { color: var(--sx-alert); }

/* крупная цифра */
.sx-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.sx-stat .sx-eyebrow { display: flex; align-items: center; gap: 8px; letter-spacing: .22em; }
.sx-stat__v { font: 200 34px/1.1 var(--sx-font); font-variant-numeric: tabular-nums; }
.sx-stat__v small { font-size: 14px; color: var(--sx-dim); margin-left: 6px; letter-spacing: .1em; }

/* ---------- кнопки ---------- */
.sx-btn--icon { width: 28px; height: 28px; padding: 0; justify-content: center; }
.sx-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; cursor: pointer;
  font: inherit; letter-spacing: .2em; text-transform: uppercase; font-size: 13px;
  color: var(--sx-fg); background: transparent; border: 1px solid var(--sx-line);
}
.sx-btn:hover { border-color: var(--sx-line-hi); box-shadow: var(--sx-glow); }
.sx-btn:active, .sx-btn[aria-pressed="true"] { background: var(--sx-fg); color: var(--sx-on-fg); border-color: var(--sx-fg); }
.sx-btn--alert { color: var(--sx-alert); border-color: var(--sx-alert); }
.sx-btn--alert:hover { box-shadow: none; background: var(--sx-alert-soft); }

/* ---------- меню / список (выбор мигает) ---------- */
.sx-menu { list-style: none; margin: 0; padding: 0; }
.sx-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px;
  padding: 9px 14px; border-left: 2px solid transparent; cursor: default;
}
.sx-item + .sx-item { border-top: 1px solid var(--sx-line); }
.sx-item__sub { grid-column: 2 / -1; font-size: 13px; color: var(--sx-dim); display: flex; gap: 14px; }
.sx-item:hover { background: var(--sx-surface-hi); border-left-color: var(--sx-line-hi); }
/* выбранный пункт — инверсная плашка, как подсветка в старых системах */
.sx-item[aria-selected="true"] { background: var(--sx-fg); color: var(--sx-on-fg); border-left-color: var(--sx-fg); }
.sx-item[aria-selected="true"] .sx-item__sub { color: inherit; opacity: .7; }
.sx-item[aria-selected="true"] .sx-meter > i { background: currentColor; box-shadow: none; }
.sx-item[aria-selected="true"] .sx-meter::before { background: currentColor; opacity: .3; }
.sx-item[data-state="offline"] { border-left-color: var(--sx-alert); }
.sx-item[data-state="offline"][aria-selected="true"] { background: var(--sx-alert); color: var(--sx-on-alert); }
.sx-item[data-state="offline"][aria-selected="true"] .sx-state { color: inherit; }
.sx-group { padding: 12px 14px 6px; }

/* ---------- анимации ---------- */
/* однократное мягкое «включение» выбранного элемента: плавно проявляется из полутени, один раз, без рывков
   (вешается из sx.js: SX.blink) */
@keyframes sx-blink-once {
  0%   { opacity: .45; filter: brightness(1.35); }
  100% { opacity: 1;   filter: brightness(1); }
}
.sx-blink-once { animation: sx-blink-once var(--sx-blink) cubic-bezier(.2, .6, .3, 1); }
/* постоянное «дыхание» (курсор, degraded, live) — медленное, без резких переключений */
@keyframes sx-loop { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.sx-blink { animation: sx-loop 2.2s ease-in-out infinite; }
/* развёртка линии при появлении блока (boot) */
@keyframes sx-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sx-reveal { animation: sx-reveal .8s cubic-bezier(.3, .6, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .sx-blink, .sx-blink-once, .sx-reveal, .sx-cursor::after, [data-state="degraded"] .sx-state { animation: none; }
  .sx-meter > i { transition: none; }
}


/* ---------- ввод и обратная связь ---------- */
.sx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sx-kbd {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; text-align: center;
  font: 400 10px/16px var(--sx-mono); letter-spacing: .04em; color: var(--sx-dim); border: 1px solid var(--sx-line);
}
.sx-btn .sx-kbd { margin-left: 2px; }
.sx-btn[aria-pressed="true"] .sx-kbd, .sx-btn:active .sx-kbd { color: inherit; border-color: currentColor; opacity: .7; }
.sx-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; letter-spacing: .16em; }

/* поле ввода с иконкой слева: <label class="sx-field"><svg class="sx-icon" data-icon="search"></svg><input class="sx-input"></label> */
.sx-field { position: relative; display: block; }
.sx-field > .sx-icon { position: absolute; left: 10px; top: 50%; width: 1em; height: 1em; margin-top: -.5em; color: var(--sx-dim); pointer-events: none; }
.sx-input {
  width: 100%; height: 32px; padding: 0 10px 0 32px; border-radius: 0;
  font: inherit; font-size: 14px; letter-spacing: .04em; color: var(--sx-fg);
  background: var(--sx-surface); border: 1px solid var(--sx-line);
}
/* <select class="sx-input">: список открывается нативным попапом, а фон у поля полупрозрачный → попап был белым с белым текстом.
   color-scheme перекрашивает нативные контролы (попап, полосы прокрутки), option получают непрозрачный фон. */
.sx { color-scheme: dark; }
.sx[data-theme="inverse"] { color-scheme: light; }
select.sx-input { padding-left: 10px; }
.sx-input option, .sx-input optgroup { background: var(--sx-bg-2); color: var(--sx-fg); }
.sx-input::placeholder { color: var(--sx-dim); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.sx-input:hover { border-color: var(--sx-faint); }
.sx-input:focus { outline: none; border-color: var(--sx-line-hi); box-shadow: var(--sx-glow); }
.sx-input::-webkit-search-cancel-button { display: none; }

/* подсказка: data-tip="Текст" (+ data-tip-pos="up|left"); появляется с задержкой, по hover и клавиатурному фокусу */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 60; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  padding: 4px 9px; white-space: nowrap; pointer-events: none;
  font: 400 12px/1.4 var(--sx-font); letter-spacing: .14em; text-transform: uppercase; text-align: left;
  color: var(--sx-fg); background: var(--sx-bg); border: 1px solid var(--sx-line-hi);
  opacity: 0; transition: opacity .18s ease 0s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transition-delay: .4s; }
[data-tip-pos="up"]::after { top: auto; bottom: calc(100% + 8px); }
[data-tip-pos="left"]::after { left: auto; right: 0; transform: none; }

/* всплывающая карточка у курсора (наведение на canvas и т.п.) */
.sx-pop {
  position: absolute; z-index: 60; min-width: 150px; padding: 8px 10px; pointer-events: none;
  font: 400 12px/1.55 var(--sx-mono); color: var(--sx-fg); background: var(--sx-bg); border: 1px solid var(--sx-line-hi);
}
.sx-pop b { display: block; margin-bottom: 2px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.sx-pop .sx-kv { gap: 0 14px; }
.sx-pop[data-state="offline"], .sx-pop[data-state="degraded"] { border-color: var(--sx-alert); }

/* журнал событий: <ol class="sx-log" role="log" aria-live="polite"><li class="is-alert"><time>12:04:11</time><span>…</span></li> */
.sx-log { list-style: none; margin: 0; padding: 0; font: 400 12px/1.6 var(--sx-mono); }
.sx-log li { display: grid; grid-template-columns: auto 1fr; gap: 10px; color: var(--sx-dim); }
.sx-log time { opacity: .8; }
.sx-log .is-ok { color: var(--sx-fg); }
.sx-log .is-alert { color: var(--sx-alert); }

/* пустое состояние */
.sx-empty { padding: 20px 14px; text-align: center; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--sx-dim); }

/* экран запуска (SX.boot): один раз за сессию, закрывается кликом / клавишей.
   Сценарий (~2.1 с, базовые стили = финальный кадр, анимации только «из» с fill-mode: backwards):
   1) значок питания коротко мерцает дважды → 2) справа сверху вниз прорисовывается вертикальная линия →
   3) из линии выезжает надпись. */
.sx-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; cursor: pointer;
           background: radial-gradient(ellipse at 50% 38%, var(--sx-bg-2) 0%, var(--sx-bg) 78%); transition: opacity .6s ease; }
.sx-boot.is-out { opacity: 0; pointer-events: none; }
.sx-boot__in { display: flex; align-items: center; gap: 16px; font-size: 20px; }
.sx-boot__in .sx-power { animation: sx-boot-flicker .9s step-end backwards; }
.sx-boot__in .vbar { width: 1px; align-self: stretch; background: var(--sx-line-hi); box-shadow: var(--sx-glow);
                     animation: sx-boot-line .45s cubic-bezier(.4, 0, .2, 1) .95s backwards; }
.sx-boot__in .txt { display: block; overflow: hidden; animation: sx-boot-txt .7s cubic-bezier(.2, .6, .3, 1) 1.4s backwards; }
.sx-boot__in .txt > span { display: block; animation: sx-boot-slide .7s cubic-bezier(.2, .6, .3, 1) 1.4s backwards; }
@keyframes sx-boot-flicker { 0%, 100% { opacity: 1; } 0% { opacity: 0; } 10% { opacity: 1; } 24% { opacity: 0; } 36% { opacity: 1; } 50% { opacity: 0; } 62% { opacity: 1; } }
@keyframes sx-boot-line { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sx-boot-txt { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sx-boot-slide { from { transform: translateX(-28px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sx-boot__in .sx-power, .sx-boot__in .vbar, .sx-boot__in .txt, .sx-boot__in .txt > span { animation: none; }
}

/* ---------- плотность ---------- */
[data-density="compact"] .sx-item { padding-block: 5px; }
[data-density="compact"] .sx-panel__body, [data-density="compact"] .sx-panel__head { padding-block: 7px; }

/* ---------- устройства и системные настройки ---------- */
@media (pointer: coarse) {          /* пальцем: цели не меньше ~40px */
  .sx-btn { min-height: 40px; }
  .sx-btn--icon { width: 40px; height: 40px; }
  .sx-btn--sm { min-height: 36px; }
  .sx-item { padding-block: 12px; }
  .sx-input { height: 40px; }
}
@media (prefers-contrast: more) {   /* повышенная контрастность: линии ярче, текстуры нет */
  :root { --sx-line: rgba(255, 255, 255, .5); --sx-dim: rgba(255, 255, 255, .92); }
  :root[data-theme="inverse"] { --sx-line: rgba(0, 0, 0, .65); --sx-dim: rgba(0, 0, 0, .92); }
  .sx body::before { display: none; }
}

/* ---------- каркас страницы ---------- */
.sx-shell { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sx-gap); padding: var(--sx-gap); min-height: 100vh; }
.sx-col { display: flex; flex-direction: column; gap: var(--sx-gap); min-width: 0; }
.sx-grid { display: grid; gap: var(--sx-gap); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sx-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 2px; }
.sx-topbar .sx-spacer { flex: 1; }
@media (max-width: 900px) { .sx-shell { grid-template-columns: 1fr; } }