/* =========================================================
   NOCTURNE — Dock
   Floating tool column on the left. Loads after styles.css and
   helm.css and reuses their palette, text-buttons, segmented
   toggles and star-selects.
   ========================================================= */

/* The Dock lives in the right gutter beneath the Placard (placard.css
   reserves the gutter and sets --dock-top). Flyouts open leftward. */
.dock {
  position: fixed;
  top: var(--dock-top, 108px);
  right: 12px;
  z-index: 56;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  transform: translateX(130%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}

.dock.dock-visible {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: transform 220ms ease, visibility 0s;
}

@media (max-width: 999px) {
  .dock { display: none; }
}

.dock-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 58px;
  padding: 6px;
  border: 1px solid rgba(143, 179, 255, 0.36);
  border-radius: 14px;
  background:
    linear-gradient(rgba(143, 179, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 179, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(12, 16, 32, 0.96), rgba(6, 10, 22, 0.95));
  background-size: 28px 28px, 28px 28px, auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
}

.dock-gap {
  height: 1px;
  margin: 4px 6px;
  background: linear-gradient(90deg, transparent, rgba(143, 179, 255, 0.5), transparent);
}

.dock-btn {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 46px;
  padding: 6px 0 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.dock-btn span {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dock-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-btn svg .dot { fill: currentColor; stroke: none; }

.dock-btn:hover {
  color: var(--moon-bright);
  border-color: rgba(143, 179, 255, 0.32);
  background: rgba(143, 179, 255, 0.06);
}

.dock-btn.dock-btn-open,
.dock-btn.dock-btn-active {
  color: #10131f;
  border-color: #d5e0ff;
  background: linear-gradient(180deg, #9dbdff, #4d76d9);
}

.dock-btn:disabled {
  opacity: 0.38;
  cursor: default;
}

.dock-btn:disabled:hover {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

/* Flyout panel beside the rail, opening toward the app. */
.dock-flyout {
  position: absolute;
  top: 0;
  right: 66px;
  width: 300px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(143, 179, 255, 0.38);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 16, 32, 0.98), rgba(6, 10, 22, 0.97));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.dock-flyout::before {
  content: "";
  position: absolute;
  top: 22px;
  right: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(143, 179, 255, 0.38);
  border-top: 1px solid rgba(143, 179, 255, 0.38);
  background: rgba(12, 16, 32, 0.98);
  transform: rotate(45deg);
}

.dock-eyebrow {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moon);
}

.dock-label {
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dock-field {
  display: block;
  margin: 0 0 10px;
}

.dock-field > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dock-select .star-select-trigger {
  min-height: 38px;
  font-size: 0.88rem;
}

.dock-select .star-select-menu {
  width: 100%;
  min-width: 0;
  max-height: min(340px, 60vh);
}

.dock-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}

.dock-row .text-button {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.dock-row-focus {
  gap: 10px;
  margin-top: 10px;
}

.dock-row-focus .dock-field {
  flex: 1 1 0;
  margin: 0 0 10px;
}

.dock-strings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.dock-string {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  min-height: 40px;
  padding: 2px;
  border: 1px solid rgba(70, 140, 112, 0.4);
  border-radius: 9px;
  background: rgba(15, 21, 39, 0.8);
}

.dock-string span {
  display: grid;
  justify-items: center;
  line-height: 1;
}

.dock-string strong { font-size: 0.86rem; color: var(--text); }
.dock-string small { margin-top: 2px; font-size: 0.56rem; color: var(--muted); }

.dock-string button {
  width: 20px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--moon-bright);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.dock-string button:hover { background: rgba(143, 179, 255, 0.12); }

.dock .segmented { display: flex; width: 100%; }
.dock .segmented .text-button { flex: 1 1 0; }

@media (prefers-reduced-motion: reduce) {
  .dock,
  .dock.dock-visible { transition: none; }
}

/* Long menus get more room and open inward. */
#dockExt .star-select-menu,
#dockInstrument .star-select-menu,
#dockPreset .star-select-menu {
  width: 300px;
  max-height: min(420px, 70vh);
}
.dock .dock-flyout .segmented + .segmented { margin-top: 6px; }
.dock .dock-string { grid-template-columns: 18px 1fr 18px; }
.dock .dock-strings { grid-template-columns: repeat(4, 1fr); }

.dock-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dock-types .text-button { min-height: 32px; font-size: .78rem; }
.dock-types .text-button.active-toggle { color: #07131e; }
.dock .segmented { width: 100%; }
.dock .segmented .text-button { flex: 1; }

.dock-link { text-decoration: none; }