/* CompX Orbit — Step 5/5: Motion Lab, effects, accessibility and final polish */

/* Preserve Curve Lab interaction while integrating the Orbit palette. */
#cxFlow20 {
  --gp: var(--orbit-blue);
  --gp2: var(--orbit-violet);
  gap: 8px;
}

#panel-advanced .tools-scroll {
  gap: 9px;
  padding: 11px !important;
}

#panel-advanced .tool-dash-row {
  gap: 9px !important;
  margin: 0 !important;
  align-items: start;
}

#panel-advanced .tool-section {
  min-height: 0 !important;
  padding: 10px !important;
  background: var(--orbit-panel) !important;
  border-color: var(--orbit-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#panel-advanced .tool-section:hover {
  background: var(--orbit-panel) !important;
  border-color: var(--orbit-line-strong) !important;
  transform: none !important;
}

#panel-advanced .tool-section-title,
#panel-advanced .tool-section-head .tool-section-title {
  color: var(--orbit-text) !important;
  font-size: 9px !important;
  letter-spacing: 0.09em !important;
}

#panel-advanced .tool-section-title::before,
#panel-advanced .tool-section-head .tool-section-title::before {
  background: var(--orbit-violet) !important;
}

#panel-advanced .cx-graph-card {
  border-color: #3d3356 !important;
}

.fx20-topbar {
  min-height: 30px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--orbit-line);
}

.fx20-kicker {
  color: var(--orbit-violet);
}

.fx20-kicker::before {
  background: var(--orbit-violet);
  box-shadow: none;
}

.fx20-title strong {
  color: var(--orbit-text);
}

#fx20-info {
  color: var(--orbit-faint);
}

.fx20-chip {
  min-height: 27px;
  padding: 4px 7px;
  color: var(--orbit-muted);
  background: #0d1118;
  border-color: var(--orbit-line);
  border-radius: 6px;
}

.fx20-chip:hover {
  color: var(--orbit-blue);
  border-color: #3979b3;
}

.fx20-chip.active,
#cxFlow20 #fx20-play.active {
  color: #06111e;
  background: var(--orbit-blue);
  border-color: var(--orbit-blue);
}

.fx20-modelstrip {
  padding: 4px;
  gap: 4px;
  background: #0b0e14;
  border-color: var(--orbit-line);
  border-radius: 8px;
}

.fx20-model {
  min-height: 40px;
  border-radius: 6px;
}

.fx20-model svg {
  stroke: var(--orbit-faint);
}

.fx20-model span {
  color: var(--orbit-faint);
}

.fx20-model:hover {
  background: var(--orbit-raised);
}

.fx20-model.active {
  color: var(--orbit-violet);
  background: var(--orbit-violet-soft);
  border-color: #654b91;
  box-shadow: none;
}

.fx20-model.active svg {
  stroke: var(--orbit-violet);
}

.fx20-model.active span {
  color: var(--orbit-violet);
}

.fx20-canvas-wrap {
  min-height: 235px;
  background: #090c12 !important;
  border-color: var(--orbit-line) !important;
  border-radius: 9px;
}

.fx20-grid line {
  stroke: rgba(104, 118, 145, 0.18);
}

.fx20-grid-strong {
  stroke: rgba(104, 118, 145, 0.35);
}

.fx20-curvearea {
  fill: var(--orbit-violet);
  fill-opacity: 0.08;
}

.fx20-curve {
  stroke: var(--orbit-violet);
  filter: drop-shadow(0 0 4px rgba(169, 120, 255, 0.42));
}

.fx20-armline {
  stroke: rgba(77, 163, 255, 0.7);
}

.fx20-handle {
  fill: var(--orbit-blue);
  stroke: #fff;
}

.fx20-slider-top span,
.fx20-status {
  color: var(--orbit-faint);
}

.fx20-slider-top b,
.fx20-status.success {
  color: var(--orbit-blue);
}

.fx20-slider input[type="range"],
#panel-advanced input[type="range"] {
  accent-color: var(--orbit-violet);
}

.fx20-select {
  min-height: 30px;
  color: var(--orbit-text);
  background: #090c12;
  border-color: var(--orbit-line);
  border-radius: 6px;
}

.fx20-libtabs button {
  color: var(--orbit-faint);
}

.fx20-libtabs button.active {
  color: var(--orbit-violet);
  border-bottom-color: var(--orbit-violet);
}

.fx20-preset {
  min-height: 52px;
  background: #0d1118;
  border-color: var(--orbit-line);
  border-radius: 7px;
  transform: none !important;
}

.fx20-preset:hover {
  background: var(--orbit-raised);
  border-color: #654b91;
}

.fx20-preset-line {
  stroke: var(--orbit-violet);
}

.fx20-preset span {
  color: var(--orbit-muted);
}

.fx20-actions button {
  min-height: 32px;
  color: var(--orbit-muted);
  background: #0d1118;
  border-color: var(--orbit-line);
  border-radius: 6px;
}

.fx20-actions button:hover {
  color: var(--orbit-blue);
  border-color: #3979b3;
}

.fx20-apply {
  min-height: 39px;
  color: #090612;
  background: var(--orbit-violet);
  border: 1px solid #bd99ff;
  border-radius: 7px;
  box-shadow: none;
}

.fx20-apply:hover {
  background: #bd99ff;
  filter: none;
}

.fx20-previewdot {
  stroke: var(--orbit-violet);
  filter: drop-shadow(0 0 6px var(--orbit-violet));
}

/* Advanced feature cards */
#panel-advanced .cx-camera-hero,
#panel-advanced .morph-note {
  color: var(--orbit-muted);
  background: #0b0e14 !important;
  border-color: var(--orbit-line) !important;
  box-shadow: none !important;
}

#panel-advanced .cx-camera-primary button,
#panel-advanced .cx-camera-console button,
#panel-advanced .cx-camera-footer button,
#advancedToolkitDock .dock-icon {
  color: var(--orbit-muted) !important;
  background: #0d1118 !important;
  border-color: var(--orbit-line) !important;
  box-shadow: none !important;
}

#panel-advanced .cx-camera-primary button:hover,
#panel-advanced .cx-camera-console button:hover,
#panel-advanced .cx-camera-footer button:hover,
#advancedToolkitDock .dock-icon:hover {
  color: var(--orbit-violet) !important;
  background: var(--orbit-violet-soft) !important;
  border-color: #654b91 !important;
}

#panel-advanced .cx-camera-footer button.danger {
  color: var(--orbit-danger) !important;
  background: #241218 !important;
  border-color: #71303b !important;
}

#advancedDockWrap {
  border-color: var(--orbit-line) !important;
}

.advanced-tool-popover {
  background: var(--orbit-panel) !important;
  border-color: var(--orbit-line-strong) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.55) !important;
}
/* Effects use violet as the creative accent, not the primary action blue. */



/* Final accessible target and feedback pass. */
#app button,
#app input,
#app select,
#app textarea {
  -webkit-tap-highlight-color: transparent;
}

#app button:disabled,
#app input:disabled,
#app select:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#app [role="status"] {
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  #panel-advanced .tool-dash-row {
    grid-template-columns: 1fr !important;
  }

  #panel-advanced .tool-dash-row > .tool-section {
    grid-column: 1 !important;
  }

  .fx20-canvas-wrap {
    min-height: 210px;
  }
}

@media (max-width: 440px) {
  #panel-advanced .tools-scroll {
    padding: 8px !important;
  }

  .fx20-topbar {
    align-items: flex-start;
  }

  .fx20-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .fx20-canvas-wrap {
    min-height: 190px;
  }

  .fx20-modelstrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fx20-lib {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx20-previewdot,
  .fx20-curve,
  #cxFlow20 * {
    animation: none !important;
  }
}

/* ---- Liquid Glass native plugin installer ---- */
.lg-install-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lg-status { font-size: 11px; opacity: 0.75; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.lg-status.lg-status-ok { color: #2ecc71; border-color: #2ecc71; opacity: 1; }
.lg-status.lg-status-warn { color: #f5a623; border-color: #f5a623; opacity: 1; }
.lg-status.lg-status-bad { color: #ff6b6b; border-color: #ff6b6b; opacity: 1; }
.lg-path-code { display: block; font-family: monospace; font-size: 10.5px; word-break: break-all; background: rgba(0,0,0,0.25); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; margin: 4px 0; }

/* ---- Plugin Settings modal — redesign (gear icon) ---- */
.lg-settings-box {
  max-width: 360px;
  border-color: var(--orbit-line);
  background: linear-gradient(165deg, var(--orbit-panel) 0%, var(--orbit-shell) 100%);
}

.lg-settings-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--orbit-text) !important;
  background: rgba(255, 255, 255, 0.02);
}

.lg-settings-header-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--orbit-blue-soft);
  color: var(--orbit-blue);
  font-size: 11px;
}

.lg-settings-header-title {
  font-size: 11px;
  letter-spacing: 0.06em;
}

.lg-settings-body {
  padding: 12px !important;
}

.lg-plugin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--orbit-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
}

.lg-plugin-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lg-plugin-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 15px;
  background: var(--orbit-blue-soft);
  border: 1px solid rgba(77, 163, 255, 0.25);
}

.lg-plugin-card-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lg-plugin-card-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--orbit-text);
  letter-spacing: 0.01em;
}

.lg-plugin-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lg-plugin-chip {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--orbit-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--orbit-line);
  border-radius: 999px;
  padding: 2px 7px;
}

.lg-plugin-help {
  flex: 0 0 auto;
  margin-top: 1px;
}

.lg-plugin-card-desc {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--orbit-muted);
}

.lg-plugin-card-desc strong {
  color: var(--orbit-text);
}

.lg-plugin-card-status-row {
  display: flex;
}

.lg-plugin-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lg-action-btn {
  width: 100%;
  justify-content: center;
}

.tool-btn.ghost {
  background: transparent !important;
  border: 1px solid var(--orbit-line) !important;
  color: var(--orbit-muted) !important;
}

.tool-btn.ghost:hover {
  color: var(--orbit-text) !important;
  border-color: var(--orbit-line-strong) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.lg-settings-hint {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--orbit-line);
  font-size: 9.5px;
  color: var(--orbit-faint);
}
/* ── Match Cut (BETA) ── */



.mc-matches-wrap {
  margin-top: 8px;
}

.mc-count {
  color: var(--orbit-accent, #22ff6f);
  font-size: 9px;
  margin-left: 6px;
}

.mc-match-row {
  position: relative;
  padding: 7px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--orbit-line);
  border-radius: var(--orbit-radius, 6px);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
}

.mc-match-row:hover {
  border-color: var(--orbit-line-strong);
  background: rgba(255, 255, 255, 0.04);
}

.mc-match-row.mc-previewing {
  border-color: var(--orbit-accent, #22ff6f);
}

.mc-match-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--orbit-text, #fff);
}

.mc-match-bar {
  position: relative;
  height: 6px;
  margin: 5px 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.mc-match-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(34, 255, 111, 0.55), var(--orbit-accent, #22ff6f));
}

.mc-match-score {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--orbit-accent, #22ff6f);
}

.mc-match-meta {
  font-size: 8.5px;
  color: var(--orbit-faint);
  letter-spacing: 0.3px;
}