/* Euclidean sequencer — изолированный namespace .esq-* */

.esq-seq-host {
  position: relative;
}

.esq-drawer-close {
  display: none;
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-page) 80%, transparent);
  color: var(--color-text-primary);
  cursor: pointer;
  font: inherit;
}

.esq-drawer-close:focus-visible {
  outline: 2px solid var(--color-accent, #76b900);
  outline-offset: 2px;
}

@media (max-width: 639px) {
  .esq-shell.esq-drawer-open .esq-seq-host {
    position: fixed;
    inset: 0;
    z-index: 1200;
    padding: var(--space-4);
    padding-top: calc(var(--space-6) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--color-bg-page, #000);
    -webkit-overflow-scrolling: touch;
  }

  .esq-shell.esq-drawer-open .esq-drawer-close {
    display: inline-flex;
  }

  body.esq-drawer-open {
    overflow: hidden;
  }
}

.esq-app {
  --esq-accent: var(--color-accent, #76b900);
  --esq-accent-soft: rgba(118, 185, 0, 0.14);
  --esq-surface: color-mix(in srgb, var(--color-bg-surface, #111) 90%, #000);
  --esq-border: color-mix(in srgb, var(--esq-accent) 25%, var(--color-border-default, #2a2a2a));
  width: 100%;
  padding: var(--space-4);
  border-radius: calc(var(--radius-md) + 4px);
  border: 1px solid var(--esq-border);
  background:
    radial-gradient(100% 80% at 100% 0%, var(--esq-accent-soft), transparent 55%),
    linear-gradient(165deg, var(--esq-surface), var(--color-bg-surface, #111));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  contain: layout style paint;
}

.esq-app-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Layout modes */
.esq-app[data-esq-layout="wide"] .esq-app-inner {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.15fr);
  gap: var(--space-5);
  align-items: start;
}

.esq-app[data-esq-layout="wide"] .esq-ring {
  width: min(100%, 320px);
}

.esq-app[data-esq-layout="stack"] .esq-side-mount {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.esq-app[data-esq-layout="wide"] .esq-toolbar-section {
  pointer-events: auto;
}

.esq-app[data-esq-layout="wide"] .esq-toolbar-section > summary {
  pointer-events: none;
  cursor: default;
  list-style: none;
}

.esq-app[data-esq-layout="wide"] .esq-toolbar-section > summary::-webkit-details-marker {
  display: none;
}

/* Economy — меньше GPU на телефоне */
.esq-app[data-esq-power="economy"] .esq-step-pulse {
  animation: none;
  opacity: 0.25;
}

.esq-app[data-esq-power="economy"] .esq-ring-playhead-glow {
  filter: none;
}

.esq-app[data-esq-power="economy"] .esq-step--on circle {
  filter: none;
}

/* Compact — прячем voice knobs */
.esq-app--compact .esq-voice-knobs-host {
  display: none;
}

.esq-app--compact .esq-ring {
  width: min(100%, 340px);
}

.esq-ring-mount {
  display: flex;
  justify-content: center;
}

.esq-ring {
  width: min(280px, 100%);
  text-align: center;
}

.esq-ring-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.esq-ring-circle,
.esq-ring-poly {
  fill: none;
  stroke: color-mix(in srgb, var(--esq-accent) 35%, var(--color-border-default));
  stroke-width: 1.2;
  opacity: 0.65;
}

.esq-ring-playhead-glow {
  fill: var(--esq-accent);
  filter: drop-shadow(0 0 8px var(--esq-accent));
  pointer-events: none;
  transition: opacity 0.08s linear;
}

.esq-step circle {
  fill: color-mix(in srgb, var(--color-text-muted) 70%, #333);
  stroke: transparent;
  transition: fill 0.12s ease;
}

.esq-step--on circle {
  fill: var(--esq-step-color, var(--esq-accent));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--esq-step-color, var(--esq-accent)) 55%, transparent));
}

.esq-step--current circle {
  stroke: #fff;
  stroke-width: 1.5;
}

.esq-step-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: esqPulseRing 1.4s ease-out infinite;
}

.esq-step-pulse-ring {
  fill: none;
  stroke: var(--esq-step-color, var(--esq-accent));
  stroke-width: 1;
}

.esq-step--current .esq-step-pulse {
  opacity: 0.85;
}

.esq-app--reduced-motion .esq-step-pulse {
  animation: none;
}

@keyframes esqPulseRing {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

.esq-ring-caption {
  margin: var(--space-2) 0 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Preset bar */
.esq-preset-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.esq-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.esq-btn--preset {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: 11px;
}

.esq-btn--compact-toggle {
  min-height: 32px;
  font-size: 11px;
  flex-shrink: 0;
}

/* Toolbar */
.esq-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.esq-toolbar-transport {
  display: flex;
  align-items: center;
}

.esq-toolbar-section {
  border: 1px solid color-mix(in srgb, var(--color-border-default) 75%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-page) 35%, transparent);
}

.esq-toolbar-section-title {
  padding: var(--space-2) var(--space-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}

.esq-toolbar-section-body {
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.esq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: color-mix(in srgb, var(--color-bg-page) 60%, transparent);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.esq-btn:hover {
  border-color: var(--esq-accent);
  color: var(--esq-accent);
}

.esq-btn--active {
  border-color: var(--esq-accent);
  background: var(--esq-accent-soft);
  color: var(--esq-accent);
}

.esq-btn:focus-visible {
  outline: 2px solid var(--esq-accent);
  outline-offset: 2px;
}

.esq-knobs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.esq-knob {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 56px;
}

.esq-knob-dial {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg-page) 70%, transparent);
  cursor: ns-resize;
  touch-action: none;
}

.esq-knob-dial:hover,
.esq-knob-dial:focus-visible {
  border-color: var(--esq-accent);
  outline: none;
}

.esq-knob-track {
  fill: none;
  stroke: color-mix(in srgb, var(--color-border-default) 90%, transparent);
  stroke-width: 2;
}

.esq-knob-needle {
  stroke: var(--esq-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.esq-knob-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  text-align: center;
}

.esq-knob-value {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 10px;
  color: var(--color-text-secondary);
}

.esq-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.esq-select-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.esq-select {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: color-mix(in srgb, var(--color-bg-page) 65%, transparent);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}

.esq-voice-knobs-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.esq-voice-knobs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.esq-voice-knob-item .esq-knob-dial {
  border-color: color-mix(in srgb, var(--esq-accent) 30%, var(--color-border-default));
}

@media (max-width: 639px) {
  .esq-knob { width: 50px; }
  .esq-knob-dial { width: 40px; height: 40px; }
  .esq-app { padding: var(--space-3); }
}

/* Landscape phone — кольцо слева */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 520px) {
  .esq-app[data-esq-layout="compact"] .esq-app-inner,
  .esq-app[data-esq-layout="stack"] .esq-app-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-3);
    align-items: start;
  }

  .esq-app[data-esq-layout="compact"] .esq-ring,
  .esq-app[data-esq-layout="stack"] .esq-ring {
    width: min(100%, 200px);
  }
}