/* ============================================================
   ORBIT MORPH — Morph tab

   Same vocabulary as the rest of the shell: #3cff5f accent,
   #22382c hairlines, 7px radii, 0.15s easing. Two cards, both
   built on one grid so they stay readable from the 260px panel
   minimum up to 900px.

   Panel selectors in this project are scoped with #app plus the
   panel id and carry !important, so these match that weight or
   they lose to the shared .tool-section skin.
   ============================================================ */

#app #panel-morph .morph-scroll {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: min-content !important;
  gap: 8px !important;
  align-content: start !important;
}

@media (min-width: 620px) {
  #app #panel-morph .morph-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#app #panel-morph .morph-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  min-width: 0 !important;
}

/* ---- Number fields ---- */
#app #panel-morph .morph-fields {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

@media (max-width: 300px) {
  #app #panel-morph .morph-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#app #panel-morph .morph-field {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 4px 6px !important;
  border: 1px solid #22382c !important;
  border-radius: 7px !important;
  background: rgba(6, 12, 8, 0.56) !important;
}

#app #panel-morph .morph-field > span {
  flex: 0 0 auto !important;
  font: 600 7px/1 "Segoe UI", sans-serif !important;
  letter-spacing: 0.1em !important;
  color: #7f9488 !important;
}

#app #panel-morph .morph-field > input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 3px !important;
  border: 1px solid #2a382f !important;
  border-radius: 5px !important;
  background: #0a110d !important;
  color: #eafff0 !important;
  font: 700 10px/1 "Segoe UI", sans-serif !important;
  text-align: center !important;
}

#app #panel-morph .morph-field > input:focus {
  border-color: #3cff5f !important;
  box-shadow: 0 0 8px rgba(60, 255, 95, 0.2) !important;
  outline: none !important;
}

#app #panel-morph .morph-field > em {
  flex: 0 0 auto !important;
  font: 500 7px/1 "Segoe UI", sans-serif !important;
  font-style: normal !important;
  color: #64786c !important;
}

/* ---- Checkboxes ---- */
#app #panel-morph .morph-toggles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 10px !important;
}

#app #panel-morph .morph-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  cursor: pointer !important;
  font: 500 8.5px/1.2 "Segoe UI", sans-serif !important;
  color: #a8bcae !important;
}

#app #panel-morph .morph-check input {
  flex: 0 0 12px !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  accent-color: #3cff5f !important;
  cursor: pointer !important;
}

#app #panel-morph .morph-check:hover {
  color: #eafff0 !important;
}

/* ---- Buttons: icon, title, one line of what it does ---- */
#app #panel-morph .morph-go,
#app #panel-morph .morph-btn {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid #2a382f !important;
  border-radius: 7px !important;
  background: linear-gradient(150deg, #151f18, #0a100c) !important;
  color: #e0e9e2 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025) !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease !important;
}

#app #panel-morph .morph-go svg,
#app #panel-morph .morph-btn svg {
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  justify-self: center !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  color: #57a86b !important;
}

#app #panel-morph .morph-go b,
#app #panel-morph .morph-btn b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font: 700 9px/1.2 "Segoe UI", sans-serif !important;
  letter-spacing: 0.07em !important;
  text-align: center !important;
  justify-self: center !important;
}

#app #panel-morph .morph-go small,
#app #panel-morph .morph-btn small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font: 400 7.5px/1.25 "Segoe UI", sans-serif !important;
  color: #7f9488 !important;
  text-align: center !important;
  justify-self: center !important;
}

#app #panel-morph .morph-go:hover,
#app #panel-morph .morph-btn:hover {
  border-color: #47935a !important;
  background: #12231a !important;
  color: #eafff0 !important;
  box-shadow: 0 0 10px rgba(60, 255, 95, 0.16) !important;
  justify-self: center !important;
}

#app #panel-morph .morph-go:hover svg,
#app #panel-morph .morph-btn:hover svg {
  color: #3cff5f !important;
}

#app #panel-morph .morph-go:active,
#app #panel-morph .morph-btn:active {
  transform: translateY(1px) !important;
}

#app #panel-morph .morph-go:focus-visible,
#app #panel-morph .morph-btn:focus-visible,
#app #panel-morph .morph-check input:focus-visible {
  outline: 2px solid #3cff5f !important;
  outline-offset: 1px !important;
}

/* MORPH is the one thing this tab is for, so it carries the accent. */
#app #panel-morph .morph-go {
  border-color: rgba(60, 255, 95, 0.55) !important;
  background: linear-gradient(150deg, #16301f, #0c1a11) !important;
  padding: 9px !important;
}

#app #panel-morph .morph-go svg {
  width: 20px !important;
  height: 20px !important;
  color: #3cff5f !important;
}

#app #panel-morph .morph-go b {
  font-size: 10px !important;
  color: #eafff0 !important;
}

#app #panel-morph .morph-go:hover {
  border-color: #3cff5f !important;
  box-shadow: 0 0 14px rgba(60, 255, 95, 0.26) !important;
}

/* Clean deletes things, so it reads as destructive without shouting. */
#app #panel-morph .morph-btn.morph-danger {
  border-color: #3d2626 !important;
  background: linear-gradient(150deg, #1a1212, #110b0b) !important;
}

#app #panel-morph .morph-btn.morph-danger svg {
  color: #b8807f !important;
}

#app #panel-morph .morph-btn.morph-danger:hover {
  border-color: #c2504f !important;
  background: #2a1414 !important;
  color: #ffdede !important;
  box-shadow: 0 0 10px rgba(194, 80, 79, 0.26) !important;
}

#app #panel-morph .morph-btn.morph-danger:hover svg {
  color: #ffdede !important;
}

/* ---- Shaping grid ---- */
#app #panel-morph .morph-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

@media (max-width: 330px) {
  #app #panel-morph .morph-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- Status ---- */
#app #panel-morph .morph-status {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font: 500 8.5px/1.3 "Segoe UI", sans-serif !important;
  color: #7f9488 !important;
  text-align: right !important;
}

#app #panel-morph .morph-status.is-error {
  color: #ff9b9b !important;
}

#app #panel-morph .morph-status.is-ok {
  color: #9fd6ac !important;
}

/* A call is one host round trip; lock the tab rather than let a second
   click stack another undo group on top of the first. */
#app #panel-morph.is-busy .morph-go,
#app #panel-morph.is-busy .morph-btn {
  pointer-events: none !important;
  opacity: 0.55 !important;
}

@media (prefers-reduced-motion: reduce) {
  #app #panel-morph .morph-go,
  #app #panel-morph .morph-btn {
    transition: none !important;
  }
}

/* The hidden field row must actually leave the grid, not just go invisible. */
#app #panel-morph .morph-fields[hidden] {
  display: none !important;
}

/* DRIVES carries a select rather than a number, so it needs the room. */
#app #panel-morph .morph-field-wide {
  grid-column: span 2 !important;
}

#app #panel-morph .morph-field > select {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 1px solid #2a382f !important;
  border-radius: 5px !important;
  background: #0a110d !important;
  color: #eafff0 !important;
  font: 600 9px/1 "Segoe UI", sans-serif !important;
}

#app #panel-morph .morph-field > select:focus {
  border-color: #3cff5f !important;
  box-shadow: 0 0 8px rgba(60, 255, 95, 0.2) !important;
  outline: none !important;
}

@media (max-width: 300px) {
  #app #panel-morph .morph-field-wide {
    grid-column: span 2 !important;
  }
}


/* ============================================================
   Round Pro card (moved here from Toolkit)
   ============================================================ */
#app #panel-morph .morph-seg {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px !important;
  padding: 3px !important;
  border: 1px solid #22382c !important;
  border-radius: 8px !important;
  background: rgba(6, 12, 8, 0.56) !important;
}

#app #panel-morph .morph-seg-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #7f9488 !important;
  font: 700 8px/1 "Segoe UI", sans-serif !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  transition: color 0.15s, background 0.15s, border-color 0.15s !important;
}

#app #panel-morph .morph-seg-btn svg {
  flex: 0 0 13px !important;
  width: 13px !important;
  height: 13px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

#app #panel-morph .morph-seg-btn:hover {
  color: #eafff0 !important;
  background: rgba(60, 255, 95, 0.05) !important;
}

#app #panel-morph .morph-seg-btn.active {
  color: #eafff0 !important;
  border-color: #3cff5f !important;
  background: rgba(60, 255, 95, 0.1) !important;
  box-shadow: 0 0 8px rgba(60, 255, 95, 0.16) !important;
}

#app #panel-morph .morph-seg-btn.active svg {
  color: #3cff5f !important;
}

#app #panel-morph .morph-seg-btn:focus-visible {
  outline: 1px solid #3cff5f !important;
  outline-offset: 1px !important;
}

#app #panel-morph .morph-fields-radius {
  grid-template-columns: minmax(0, 1fr) !important;
}

#app #panel-morph .morph-fields-corners {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 300px) {
  #app #panel-morph .morph-fields-corners {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Corners are locked while Link corners is on (or the shape is a circle). */
#app #panel-morph .morph-field > input:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ---- Two-column layout without a hole ----
   With GRID gone to the Carousel tab, ROUND PRO sat alone in the second
   row with an empty half beside it. MORPH and SHAPING are about as tall
   together as ROUND PRO is on its own, so they stack on the left and
   ROUND PRO takes the right column top to bottom. */
@media (min-width: 620px) {
  #app #panel-morph .morph-scroll {
    grid-template-areas: "morph round" "shape round" !important;
    align-items: stretch !important;
  }
  #app #panel-morph #morphMainCard { grid-area: morph !important; }
  #app #panel-morph #morphShapeCard { grid-area: shape !important; }
  #app #panel-morph #toolkitRoundProSection { grid-area: round !important; }
}

/* The shared .tool-section skin pins cards to height:100% with
   overflow:hidden; on a short panel that clipped the bottom of every
   Morph card instead of letting the tab scroll. */
#app #panel-morph .morph-scroll > .tool-section {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* ROUND PRO came from the Toolkit tab with a 10px top margin; in this
   grid it has to start level with MORPH. */
#app #panel-morph .morph-scroll > #toolkitRoundProSection { margin: 0 !important; }