/* @asm-protocol/ui-kit@0.2.0 — dist/site: tokens, parameters, operator, glitch, tty.
   Copied verbatim from the npm package (only the Google Fonts @import is dropped:
   IBM Plex is self-hosted next to this file). Landing styles extend it in landing.css. */

/* ---- ui-kit/site/tokens.css ---- */

:root {
  /* Длительность glitch-перехода shred по всему сайту (было 0.4s). */
  --glitch-duration: var(--fx-glitch-duration);
  --bg: #070a09;
  --panel: #0b100e;
  --line: #1a2521;
  --ink: #c7d4ce;
  --muted: #7a8a83;
  --green: #72f2b0;
  --blue: #68bde7;
  --amber: #e8b45b;
  --red: #f47777;
  --violet: #c29bf0;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---- ui-kit/site/parameters.css ---- */
:root {
  --site-canvas-fixed: #070a09;
  --site-panel-fixed: #0b100e;
  --site-surface-deep: #080c0a;
  --site-brand-muted: #6e7e77;
  --site-nav-hover: #111a16;
  --site-account-border: #1f2c27;
  --site-heading: #dde8e3;
  --site-body-secondary: #a9b7b1;
  --site-control-border: #24352f;
  --site-control-hover: #0c120f;
  --site-control-hover-border: #3a4f47;
  --site-primary-surface: #0f1a15;
  --site-primary-hover: #13241c;
  --site-danger-border: #73383b;
  --site-description: #93a29c;
  --site-collection-surface: #0a0f0d;
  --site-row-divider: #101915;
  --site-row-hover: #0c1310;
  --site-next-surface: #0c1512;
  --site-story-surface: #091011;
  --site-lesson-active: #101914;
  --site-mode-active: #14221b;
  --site-code-border: #16201c;
  --site-code-text: #c8d9d0;
  --site-warning-surface: #100e08;
  --site-option-hover: #0d1511;
  --site-hint-text: #c9b384;
  --site-success-border: #347154;
  --site-nav-active-border: #3e7057;
  --site-skin-active: #15231c;
  --site-corpus-fallback: #47f6a6;
  --site-danger-fixed: #f47777;
  --site-info-fixed: #68bde7;
  --site-ink-fixed: #c7d4ce;
  --site-link-hover: #9ad5f2;
  --site-line-number: #5b6f66;
  --site-machine-text: #d3e2da;
  --site-done-marker: #6f8a7e;
  --site-skipped-text: #6a7a73;
  --site-tape-border: #2d3c36;
  --site-machine-muted: #74897f;
  --site-tape-done: #b4c4bc;
  --site-register-border: #1e2b26;
  --site-sandbox-muted: #8d9c94;
  --site-warning-fixed: #e8b45b;
  --site-accent-fixed: #72f2b0;
  --site-sandbox-error-border: #5e3436;
  --site-bench-next: rgb(114 242 176 / 7%);
  --site-bench-current: rgb(104 189 231 / 7%);
  --site-bench-skipped-decoration: rgb(232 180 91 / 70%);
  --site-dialog-backdrop: rgb(4 6 5 / 72%);
  --fx-glitch-duration: 0.3s;
  --fx-glitch-shift: 12px;
  --fx-glitch-rgb: 2px;
  --fx-glitch-color-a: #f47777;
  --fx-glitch-color-b: #68bde7;
  --fx-glow-rgb: 114 242 176;
  --fx-glow-text-radius: 9px;
  --fx-glow-text-alpha: 0.9;
  --fx-glow-box-radius: 16px;
  --fx-glow-box-alpha: 0.2;
  --fx-glow-subtle-radius: 10px;
  --fx-glow-subtle-alpha: 0.07;
  --fx-glow-session-radius: 8px;
  --fx-glow-register-radius: 8px;
  --fx-glow-register-alpha: 0.35;
  --fx-glow-flag-radius: 6px;
  --fx-glow-flag-alpha: 0.6;
  --fx-transition-duration: 120ms;
  --fx-scan-alpha: 0.2;
  --fx-scan-line: 1px;
  --fx-scan-period: 3px;
  --fx-crt-inset-alpha: 0.45;
  --fx-crt-inset-radius: 120px;
  --fx-crt-inset-spread: 6px;
  --fx-crt-tint-alpha: 0.04;
  --fx-crt-tint-radius: 50px;
  --fx-vignette-alpha: 0.5;
  --fx-vignette-start: 64%;
  --btn-font-size: 11px;
  --btn-font-weight: 500;
  --btn-tracking: 0.16em;
  --btn-bench-width: 44px;
  --btn-height: 42px;
  --btn-bench-padding: 0 12px;
  --btn-radius: 3px;
  --btn-step-width: 112px;
  --btn-bench-disabled-opacity: 0.4;
  --btn-skin-padding: 5px 6px;
  --btn-skin-bg: transparent;
  --btn-disabled-opacity: 0.45;
  --btn-nav-padding: 9px 10px;
  --btn-nav-bg: transparent;
  --btn-pad-y: 11px;
  --btn-pad-x: 16px;
  --btn-bg: transparent;
  --btn-link-bg: none;
  --btn-link-padding: 5px 0;
  --btn-group-padding: 6px 12px;
  --btn-group-radius: 2px;
  --btn-group-bg: transparent;
  --btn-group-tracking: 0.1em;
  --btn-mode-bg: transparent;
  --btn-mode-padding: 6px;
  --btn-order-padding: 4px 9px;
  --btn-order-bg: transparent;
  --btn-order-line-height: 1;
  --btn-order-disabled-opacity: 0.35;
  --btn-option-gap: 14px;
  --btn-option-padding: 12px;
  --btn-option-bg: transparent;
}

/* ---- ui-kit/site/operator.css ---- */
/* stylelint-disable color-function-notation -- Preserve legacy sRGB gradient rasterization for zero-pixel parity. */

/* Saved Learning Entry CRT texture: static, visible above the full interface. */
body.skin-operator::before,
body.skin-operator::after {
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
  content: "";
}

body.skin-operator::before {
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, var(--fx-scan-alpha)) 0 var(--fx-scan-line),
    transparent var(--fx-scan-line) var(--fx-scan-period)
  );
  box-shadow:
    inset 0 0 var(--fx-crt-inset-radius) var(--fx-crt-inset-spread)
      rgb(0 0 0 / var(--fx-crt-inset-alpha)),
    inset 0 0 var(--fx-crt-tint-radius) rgb(var(--fx-glow-rgb) / var(--fx-crt-tint-alpha));
}

body.skin-operator::after {
  z-index: 60;
  background-image: radial-gradient(
    125% 95% at 50% 45%,
    transparent var(--fx-vignette-start),
    rgba(0, 0, 0, var(--fx-vignette-alpha)) 100%
  );
}

/* The reference keeps terminal labels precise and limits glow to intentional actions. */
.topnav button,
.button,
.option,
.account-button,
.text-link,
.breadcrumb button,
.brand {
  transition:
    color var(--fx-transition-duration) ease,
    background-color var(--fx-transition-duration) ease,
    border-color var(--fx-transition-duration) ease,
    text-shadow var(--fx-transition-duration) ease,
    box-shadow var(--fx-transition-duration) ease;
}

body.skin-operator .brand:hover,
body.skin-operator .brand:focus-visible,
body.skin-operator .topnav button:hover:not(:disabled),
body.skin-operator .topnav button:focus-visible:not(:disabled),
body.skin-operator .topnav button.is-current {
  text-shadow: 0 0 var(--fx-glow-text-radius) rgb(var(--fx-glow-rgb) / var(--fx-glow-text-alpha));
}

body.skin-operator .button:hover:not(:disabled),
body.skin-operator .button:focus-visible:not(:disabled),
body.skin-operator .option:hover:not(:disabled),
body.skin-operator .option:focus-visible:not(:disabled) {
  text-shadow: 0 0 var(--fx-glow-text-radius) rgb(var(--fx-glow-rgb) / var(--fx-glow-text-alpha));
}

body.skin-operator .button--primary:hover:not(:disabled),
body.skin-operator .button--primary:focus-visible:not(:disabled) {
  border-color: var(--btn-primary-hover-border, var(--green));
  box-shadow: 0 0 var(--fx-glow-box-radius) rgb(var(--fx-glow-rgb) / var(--fx-glow-box-alpha));
}

body.skin-operator .button:not(.button--primary):hover:not(:disabled),
body.skin-operator .account-button:hover:not(:disabled),
body.skin-operator .account-button:focus-visible:not(:disabled) {
  border-color: var(--btn-hover-border, var(--site-control-hover-border));
  color: var(--btn-hover-color, var(--site-ink-fixed));
}

body.skin-operator .text-link:hover:not(:disabled),
body.skin-operator .text-link:focus-visible:not(:disabled),
body.skin-operator .breadcrumb button:hover:not(:disabled),
body.skin-operator .breadcrumb button:focus-visible:not(:disabled) {
  color: var(--btn-link-hover-color, var(--site-link-hover));
}

.brand:focus-visible {
  outline-offset: 4px;
}

.topnav button:focus-visible,
.button:focus-visible,
.option:focus-visible,
.account-button:focus-visible,
.text-link:focus-visible,
.breadcrumb button:focus-visible {
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .topnav button,
  .button,
  .option,
  .account-button,
  .text-link,
  .breadcrumb button,
  .brand {
    transition: none;
  }
}

/* TTY is deliberately flat: no CRT texture or neon action glow. */
body.skin-tty .button:hover,
body.skin-tty .button:focus-visible,
body.skin-tty .option:hover,
body.skin-tty .option:focus-visible,
body.skin-tty .brand:hover,
body.skin-tty .brand:focus-visible,
body.skin-tty .topnav button:hover,
body.skin-tty .topnav button:focus-visible,
body.skin-tty .account-button:hover,
body.skin-tty .account-button:focus-visible {
  box-shadow: none;
  text-shadow: none;
}

/* ---- ui-kit/site/glitch.css ---- */
@keyframes shred {
  0% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
    transform: translateX(calc(var(--fx-glitch-shift) * -1));
  }

  20% {
    clip-path: polygon(0 30%, 100% 30%, 100% 62%, 0 62%);
    transform: translateX(calc(var(--fx-glitch-shift) * 5 / 6));
  }

  40% {
    clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
    transform: translateX(calc(var(--fx-glitch-shift) * -7 / 12));
  }

  55% {
    clip-path: inset(0);
    transform: translateX(calc(var(--fx-glitch-shift) * 5 / 12));
    text-shadow:
      var(--fx-glitch-rgb) 0 var(--fx-glitch-color-a),
      calc(var(--fx-glitch-rgb) * -1) 0 var(--fx-glitch-color-b);
  }

  75% {
    transform: translateX(calc(var(--fx-glitch-shift) / -6));
    text-shadow:
      calc(var(--fx-glitch-rgb) / 2) 0 var(--fx-glitch-color-a),
      calc(var(--fx-glitch-rgb) / -2) 0 var(--fx-glitch-color-b);
  }

  100% {
    clip-path: inset(0);
    transform: none;
    text-shadow: none;
  }
}

/* Presets are opt-in. Keep shred and the host skin/motion policy unchanged. */
html[data-fx-glitch-preset="hard-cut"]
  body.skin-operator
  :is(.screen, .lesson-screen, .account-dialog, .feedback, .hint, .exercise) {
  animation-name: hard-cut;
}

html[data-fx-glitch-preset="tape-track"]
  body.skin-operator
  :is(.screen, .lesson-screen, .account-dialog, .feedback, .hint, .exercise) {
  animation-name: tape-track;
}

html[data-fx-glitch-preset="blackout"]
  body.skin-operator
  :is(.screen, .lesson-screen, .account-dialog, .feedback, .hint, .exercise) {
  animation-name: blackout;
}

@keyframes hard-cut {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
    clip-path: inset(12% 0 64%);
    transform: translateX(calc(var(--fx-glitch-shift) * -1));
  }

  25% {
    clip-path: inset(58% 0 10%);
    transform: translateX(var(--fx-glitch-shift));
    filter: invert(0.85);
  }

  40% {
    clip-path: inset(30% 0 38%);
    transform: translateX(calc(var(--fx-glitch-shift) * -0.6));
    filter: none;
  }

  55% {
    clip-path: inset(0);
    transform: translateX(calc(var(--fx-glitch-shift) * 0.6));
    filter: brightness(2.4);
    text-shadow:
      var(--fx-glitch-rgb) 0 var(--fx-glitch-color-a),
      calc(var(--fx-glitch-rgb) * -1) 0 var(--fx-glitch-color-b);
  }

  70% {
    transform: translateX(calc(var(--fx-glitch-shift) / -3));
    filter: none;
  }

  85% {
    transform: translateX(calc(var(--fx-glitch-shift) / 6));
  }

  100% {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
    filter: none;
    text-shadow: none;
  }
}

@keyframes tape-track {
  0% {
    clip-path: inset(0 0 78%);
    transform: translateY(var(--fx-glitch-shift)) skewX(-14deg);
  }

  20% {
    clip-path: inset(22% 0 52%);
    transform: translateY(calc(var(--fx-glitch-shift) * -0.8)) skewX(10deg);
  }

  40% {
    clip-path: inset(48% 0 24%);
    transform: translateY(calc(var(--fx-glitch-shift) / 2)) skewX(-6deg);
    text-shadow:
      var(--fx-glitch-rgb) 0 var(--fx-glitch-color-a),
      calc(var(--fx-glitch-rgb) * -1) 0 var(--fx-glitch-color-b);
  }

  60% {
    clip-path: inset(74% 0 0);
    transform: translateY(calc(var(--fx-glitch-shift) / -4)) skewX(3deg);
  }

  75% {
    clip-path: inset(0);
    transform: translateY(calc(var(--fx-glitch-shift) / 6));
  }

  100% {
    clip-path: inset(0);
    transform: none;
    text-shadow: none;
  }
}

@keyframes blackout {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
    filter: brightness(0);
  }

  30% {
    filter: brightness(3) contrast(2);
  }

  45% {
    filter: brightness(0);
  }

  60% {
    filter: brightness(2) saturate(0);
    transform: translateX(calc(var(--fx-glitch-shift) / -2));
    text-shadow:
      var(--fx-glitch-rgb) 0 var(--fx-glitch-color-a),
      calc(var(--fx-glitch-rgb) * -1) 0 var(--fx-glitch-color-b);
  }

  75% {
    filter: none;
    transform: translateX(calc(var(--fx-glitch-shift) / 3));
  }

  100% {
    opacity: 1;
    filter: none;
    transform: none;
    text-shadow: none;
  }
}

/* The reference presets include a transient corruption layer. It is absent
   unless explicitly selected, and stays invisible when animation is disabled. */
html[data-fx-glitch-preset]:not([data-fx="off"], [data-fx="static"], [data-fx-glitch="off"])
  body.skin-operator
  .exercise {
  position: relative;
}

html[data-fx-glitch-preset]:not([data-fx="off"], [data-fx="static"], [data-fx-glitch="off"])
  body.skin-operator
  .exercise::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  animation-duration: var(--fx-glitch-duration);
  animation-timing-function: steps(1, end);
  animation-fill-mode: both;
}

html[data-fx-glitch-preset="hard-cut"] body.skin-operator .exercise::after {
  background: repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--fx-glitch-color-b) 22%, transparent) 0 2px,
    transparent 2px 6px,
    color-mix(in srgb, var(--fx-glitch-color-a) 18%, transparent) 6px 7px,
    transparent 7px 13px
  );
  animation-name: bars-flash;
}

html[data-fx-glitch-preset="tape-track"] body.skin-operator .exercise::after {
  background: linear-gradient(transparent 35%, var(--fx-glitch-color-b) 45%, transparent 65%);
  animation-name: track-band;
}

html[data-fx-glitch-preset="blackout"] body.skin-operator .exercise::after {
  background: repeating-linear-gradient(90deg, var(--fx-glitch-color-a) 0 1px, transparent 1px 4px);
  animation-name: noise-flash;
}

@keyframes bars-flash {
  0% {
    opacity: 0.25;
    transform: translateY(0);
  }

  30% {
    opacity: 0.25;
    transform: translateY(calc(var(--fx-glitch-shift) * 0.75));
  }

  60% {
    opacity: 0.18;
    transform: translateY(calc(var(--fx-glitch-shift) * -0.6));
  }

  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes track-band {
  0% {
    opacity: 0.2;
    transform: translateY(-26%);
  }

  25% {
    transform: translateY(12%);
  }

  50% {
    transform: translateY(46%);
  }

  75% {
    opacity: 0.16;
    transform: translateY(78%);
  }

  100% {
    opacity: 0;
    transform: translateY(110%);
  }
}

@keyframes noise-flash {
  0%,
  30%,
  60%,
  100% {
    opacity: 0;
  }

  15% {
    opacity: 0.15;
  }

  45% {
    opacity: 0.12;
  }
}

/* ---- ui-kit/site/tty.css ---- */
body.skin-tty {
  --bg: #050705;
  --panel: #070b07;
  --ink: #d1d8cc;
  --muted: #91a18a;
  --green: #b7ce8a;
  --blue: #b7ce8a;
  --line: #344230;
  --sans: var(--mono);
}

body.skin-tty .screen,
body.skin-tty .lesson-screen,
body.skin-tty .account-dialog,
body.skin-tty .feedback,
body.skin-tty .hint {
  animation: none;
}

body.skin-tty .button,
body.skin-tty .panel,
body.skin-tty .catalog,
body.skin-tty .module-list,
body.skin-tty .workbench {
  border-radius: 0;
}

body.skin-tty .session i {
  box-shadow: none;
}

body.skin-tty .topbar {
  background: var(--bg);
}