/* Automation: playlist lanes, the "automated" dot on controls and the
   right-click menu (lanes.js, widgets.js). */

/* ---------------------------------------------------------------- section divider */

.auto-divhead {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, #1a161e, #110f14);
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  z-index: 1;
}
.auto-chev {
  font-size: 10px;
  color: var(--gold);
  transition: transform 0.15s;
  width: 10px;
}
.auto-divhead.folded .auto-chev {
  transform: rotate(-90deg);
}
.auto-divtitle {
  flex: 1;
  font: 700 9px/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.auto-divhead:hover .auto-divtitle {
  color: var(--gold-hi);
}
.auto-count {
  min-width: 18px;
  height: 15px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font: 600 9px/1 var(--mono);
  color: #251a06;
  background: var(--metal);
}

.auto-divider {
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent 40%), linear-gradient(180deg, #17141b, #0f0d12);
  border-top: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  z-index: 1;
}

/* ---------------------------------------------------------------- lane headers */

.auto-head {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #1a171f, #121015);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.04),
    inset 3px 0 0 color-mix(in srgb, var(--c) 55%, transparent);
  cursor: pointer;
}
.auto-head.sel {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, transparent), #141117 75%);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.05),
    inset 3px 0 0 var(--c);
}
.auto-head.muted .auto-name,
.auto-head.muted .auto-val {
  opacity: 0.45;
}
.auto-head.bad .auto-target {
  color: var(--danger);
}
.auto-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.auto-row .swatch {
  flex: none;
}
.auto-row .btn.icon.small {
  width: 20px;
  height: 20px;
  margin-right: -4px;
}
.auto-name {
  flex: 1;
  min-width: 0;
  font: 600 13.5px/1.1 var(--serif);
  color: var(--champagne);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-target {
  min-width: 0;
  padding-left: 17px;
  font: 500 9px/1.1 var(--mono);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-val {
  flex: 1;
  padding-left: 17px;
  font: 500 10px/1 var(--mono);
  color: var(--gold-hi);
  text-shadow: 0 0 8px rgba(245, 214, 120, 0.45);
}

/* ---------------------------------------------------------------- lane bodies */

.auto-lane {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(255, 240, 210, 0.035) 50%, transparent calc(50% + 0.5px)), rgba(7, 6, 9, 0.5);
  cursor: crosshair;
}
.auto-lane.sel {
  background:
    linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(255, 240, 210, 0.04) 50%, transparent calc(50% + 0.5px)),
    color-mix(in srgb, var(--c) 6%, rgba(7, 6, 9, 0.45));
}
.auto-curve {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.auto-pt {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #0d0b10;
  border: 2px solid var(--c);
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 70%, transparent);
  pointer-events: none;
  z-index: 2;
}
.auto-lane.muted .auto-pt {
  opacity: 0.45;
}
.auto-pt.sel {
  background: var(--ivory);
  border-color: var(--ivory);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--c) 80%, transparent),
    0 0 12px rgba(246, 238, 221, 0.7);
  z-index: 3;
}
.auto-tag {
  position: absolute;
  transform: translate(-50%, calc(-100% - 9px));
  padding: 3px 6px;
  border-radius: 5px;
  font: 500 9.5px/1 var(--mono);
  color: var(--ivory);
  white-space: nowrap;
  background: rgba(12, 10, 15, 0.92);
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 4;
}
.auto-tag.below {
  transform: translate(-50%, 9px);
}

/* ---------------------------------------------------------------- automated controls */

.auto-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff4c9, var(--gold) 60%, #8a6a22);
  box-shadow: 0 0 6px rgba(245, 214, 120, 0.9);
  pointer-events: none;
  z-index: 2;
}
.fader .auto-dot {
  top: 2px;
  right: -1px;
}
.lcd.automated {
  position: relative;
}
.lcd .auto-dot {
  top: 5px;
  right: 6px;
}
.knob.automated .knob-ring {
  filter: drop-shadow(0 0 4px rgba(245, 214, 120, 0.7));
}

/* ---------------------------------------------------------------- context menu */

.auto-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.auto-menu {
  position: fixed;
  z-index: 91;
  min-width: 230px;
  padding: 8px 6px 6px;
  border-radius: 11px;
  background: linear-gradient(180deg, #241f2a, #141117);
  border: 1px solid var(--line-3);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(212, 175, 55, 0.12);
}
.auto-menu-title {
  padding: 0 8px;
  font: 600 15px/1.2 var(--serif);
  color: var(--champagne);
}
.auto-menu-sub {
  padding: 2px 8px 7px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font: 500 9.5px/1.2 var(--mono);
  color: var(--dim);
}
.auto-menu-note {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 11.5px;
}
.auto-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  text-align: left;
}
.auto-menu-item .glyph {
  width: 14px;
  height: 14px;
  color: var(--gold);
}
.auto-menu-item:hover {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.04));
  color: var(--gold-hi);
}