/*
  Токены дизайна — «фосфорный терминал / память на магнитных сердечниках».
  Тема отсылает к старым терминалам и физической памяти на кольцевых
  сердечниках, где каждый бит буквально был «зажжён» или «погашен» —
  что прямо соответствует сути демонстрации.

  Цвет:
    --bg-void      #0d0f0b  фон страницы
    --bg-panel     #14170f  панели
    --bg-input     #1b1f14  поля ввода
    --line         #2b3123  границы, разделители
    --ink          #d9dcc7  основной читаемый текст
    --ink-dim      #838a6c  второстепенный текст
    --amber        #eab654  акцент интерфейса (кнопки, фокус)
    --amber-bright #ffd989  «зажжённый» бит (значение 1)
    --danger       #e2725b  ошибки
    --ok           #9bc27c  успешные действия

  Шрифты:
    --font-ui   системный гротеск — для интерфейсных надписей
    --font-mono моноширинный — для всего, что является «сырыми данными»
                (адреса, значения байт, статусная строка)
*/

:root {
  --bg-void: #0d0f0b;
  --bg-panel: #14170f;
  --bg-input: #1b1f14;
  --line: #2b3123;
  --ink: #d9dcc7;
  --ink-dim: #838a6c;
  --amber: #eab654;
  --amber-bright: #ffd989;
  --danger: #e2725b;
  --ok: #9bc27c;

  --font-ui: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-void);
  color: var(--ink);
  font-family: var(--font-ui);
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 18px;
  gap: 12px;
}

/* Заголовок */
.app__header h1 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prompt { color: var(--amber); }
.cursor {
  color: var(--amber-bright);
  animation: blink 1.1s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}
@keyframes blink { 50% { opacity: 0; } }

.app__hint {
  margin: 0;
  max-width: 82ch;
  color: var(--ink-dim);
  font-size: 0.84rem;
  line-height: 1.5;
}
.hint-amber { color: var(--amber-bright); }

/* Панель управления */
.deck {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
}
.field label {
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
.field select,
.field input {
  background: var(--bg-input);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 5px;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  min-width: 150px;
}
.field--grow { flex: 1; min-width: 200px; }
.field--grow input { width: 100%; }
.field--buttons { flex-direction: row; gap: 8px; }

.field select:focus-visible,
.field input:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.btn {
  cursor: pointer;
  border-radius: 5px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--bg-input);
  color: var(--ink);
  transition: background 0.15s ease, transform 0.05s ease, border-color 0.15s ease;
}
.btn:hover { border-color: var(--amber); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #1b1305;
}
.btn--primary:hover { background: var(--amber-bright); border-color: var(--amber-bright); }
.btn--ghost { background: transparent; }

/* Статусная строка результата действия */
.status {
  margin: 0;
  min-height: 1.1em;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.status--ok { color: var(--ok); }
.status--warn { color: var(--amber); }
.status--error { color: var(--danger); }

/* Легенда переменных */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 26px;
}
.legend__empty {
  color: var(--ink-dim);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.legend__chip {
  --chip: #eab654;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-panel);
  border: 1px solid var(--chip);
  border-radius: 20px;
  padding: 4px 8px 4px 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink);
}
.legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chip);
  flex-shrink: 0;
}
.legend__remove {
  background: none;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
}
.legend__remove:hover { color: var(--danger); }

/* Ядро памяти — главный элемент экрана */
.core {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
#memoryCanvas {
  display: block;
  cursor: crosshair;
}
.core__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.12) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}

/* Статусная строка внизу (наведение мышью) */
.statusbar {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 1.2em;
}