/* WBS Vanilla Command Studio — 15.6
   One canonical menu stylesheet. Clear Glass UI.
*/

details#wbs-cmd-command-menu.wbs-cmd-command-menu.liquid{
  position:relative;
  margin:1rem 0 1.5rem;
  padding:clamp(14px,2vw,23px);
  
  isolation:isolate;
  color:var(--wbs-ui-ink,#f6f3ff);

  background:none;
  background-image:none;

  border:1px solid rgba(242,234,255,.66);
  border-radius:26px;

  backdrop-filter:
    blur(8px) saturate(135%) brightness(1.40);
  -webkit-backdrop-filter:
    blur(8px) saturate(135%) brightness(1.40);

  box-shadow:
    0 22px 48px rgba(0,0,0,.22),
    inset 0 2px rgba(255,255,255,.66),
    inset 0 -2px rgba(136,218,255,.34),
    inset 2px 0 rgba(255,255,255,.25),
    inset -2px 0 rgba(177,194,255,.20);
}

/* Expandable heading */

#wbs-cmd-command-menu > summary {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 15px;
  cursor:pointer;
  list-style:none;
  min-height:42px;
  border-radius:12px;
}

#wbs-cmd-command-menu > summary::-webkit-details-marker {
  display:none;
}

#wbs-cmd-command-menu > summary strong {
  font-weight:600;
  color:#f6f3ff;
}

#wbs-cmd-command-menu > summary span {
  font-size:.86rem;
  color:#d5cfe8;
}

.wbs-cmd-menu-chevron {
  margin-left:auto;
  flex:none;
  color:#95e7ff;
  transition:transform 240ms cubic-bezier(.2,.8,.2,1);
}

#wbs-cmd-command-menu[open] .wbs-cmd-menu-chevron {
  transform:rotate(180deg);
}

#wbs-cmd-command-menu > summary:hover strong {
  color:#b9ecff;
}

/* Open animation */

.wbs-cmd-menu-inside {
  margin-top:12px;
  transform-origin:top center;
}

#wbs-cmd-command-menu[open] .wbs-cmd-menu-inside {
  animation:wbs-vcs-open 340ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes wbs-vcs-open {
  from {opacity:.55;transform:translateY(-8px)}
  to {opacity:1;transform:translateY(0)}
}

.wbs-cmd-menu-intro {
  margin:0 0 14px;
  color:#d5cfe8;
  line-height:1.6;
  font-size:.9rem;
}

/* Groups */

.wbs-cmd-menu-group {
  padding:4px 0 10px;
}

.wbs-cmd-menu-group h2 {
  display:flex;
  align-items:center;
  gap:9px;
  margin:8px 0 12px;
  font-size:1rem;
  font-weight:600;
  color:#f6f3ff;
}

.wbs-cmd-group-icon {
  display:block;
  width:19px;
  height:19px;
  flex:none;
  fill:none;
  stroke:#9ee9ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wbs-cmd-menu-group:nth-of-type(2) .wbs-cmd-group-icon {
  stroke:#bba4ff;
}

.wbs-cmd-menu-group:nth-of-type(3) .wbs-cmd-group-icon {
  stroke:#90f2de;
}

.wbs-cmd-menu-pills {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}

/* Command pills */

#wbs-cmd-command-menu .wbs-cmd-menu-chip {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 5px 3px 12px;
  min-height:40px;
  max-width:100%;
  border:1px solid rgba(195,208,255,.46);
  border-radius:999px;
  background:rgba(65,87,154,.10);

  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -1px rgba(118,177,243,.12);

  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
  border-color: var(--wbs-chip-outline);
}

#wbs-cmd-command-menu .wbs-cmd-menu-chip:hover,
#wbs-cmd-command-menu .wbs-cmd-menu-chip:focus-within {
  transform:translateY(-2px);
  border-color:rgba(149,231,255,.92);
  background:rgba(67,147,203,.19);
  box-shadow:
    0 5px 18px rgba(48,146,223,.16),
    inset 0 1px rgba(255,255,255,.42);
  border-color: var(--wbs-chip-outline);
}

#wbs-cmd-command-menu .wbs-cmd-menu-chip.is-selected {
  border-color:rgba(149,231,255,.95);
  background:linear-gradient(
    110deg,
    rgba(70,166,218,.22),
    rgba(159,122,240,.18)
  );
  box-shadow:
    0 0 0 1px rgba(149,231,255,.12),
    0 4px 20px rgba(91,119,220,.15),
    inset 0 1px rgba(255,255,255,.38);
  border-color: var(--wbs-chip-outline);
}

#wbs-cmd-command-menu .wbs-cmd-menu-chip a,
#wbs-cmd-command-menu .wbs-cmd-menu-unavailable {
  color:#f6f3ff;
  font-size:.88rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}

#wbs-cmd-command-menu .wbs-cmd-menu-unavailable {
  color:#c8cbd7;
  opacity:.78;
  cursor:default;
}

#wbs-cmd-command-menu a[aria-current="page"] {
  color:#a9edff;
  text-decoration:underline;
  text-underline-offset:4px;
}


/* WBS-COMMAND-MENU-STATUS-10-10
   One canonical status system for all 23 commands. */

/* Not ready: soft red. */
#wbs-cmd-command-menu
.wbs-cmd-menu-chip[data-cmd-available="0"] {
  --wbs-chip-outline: rgba(225, 123, 143, .47);
}

/* Ready: soft green. */
#wbs-cmd-command-menu
.wbs-cmd-menu-chip[data-cmd-available="1"] {
  --wbs-chip-outline: rgba(115, 208, 154, .55);
}

/* Open page: gentle lime, regardless of readiness. */
#wbs-cmd-command-menu
.wbs-cmd-menu-chip:has(a[aria-current="page"]) {
  --wbs-chip-outline: rgba(188, 229, 116, .77);
  border-color: var(--wbs-chip-outline);
  background:
    linear-gradient(
      115deg,
      rgba(151, 198, 112, .13),
      rgba(70, 151, 147, .08)
    );
  box-shadow:
    inset 0 1px rgba(239, 255, 224, .17),
    0 0 0 1px rgba(191, 237, 134, .07);
}

#wbs-cmd-command-menu
.wbs-cmd-menu-chip:has(a[aria-current="page"])
a[aria-current="page"] {
  color: #e5f8c8;
}

/* Information buttons */

#wbs-cmd-command-menu .wbs-cmd-menu-info {
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  padding:0;
  margin:0;
  border:1px solid rgba(149,231,255,.3);
  border-radius:50%;
  background:rgba(70,129,205,.12);
  color:#9ee9ff;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.17);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

#wbs-cmd-command-menu .wbs-cmd-menu-info > svg {
  display:block;
  flex:none;
  width:17px;
  height:17px;
  fill:none;
  stroke:#9ee9ff;
  stroke-width:2;
  opacity:1;
  transition:transform 200ms ease;
}

#wbs-cmd-command-menu .wbs-cmd-menu-info:hover,
#wbs-cmd-command-menu .wbs-cmd-menu-info[aria-pressed="true"] {
  background:rgba(70,188,232,.20);
  border-color:rgba(149,231,255,.8);
  box-shadow:0 0 14px rgba(95,208,255,.15);
}

#wbs-cmd-command-menu .wbs-cmd-menu-info:hover > svg {
  transform:scale(1.1);
}

/* Main explanatory panel */

#wbs-cmd-command-menu .wbs-cmd-menu-guide {
  position:relative;
  margin-top:17px;
  padding:clamp(16px,2.5vw,26px);
  border:1px solid rgba(242,234,255,.55);
  border-radius:20px;
  background:linear-gradient(
    125deg,
    rgba(89,95,169,.10),
    rgba(44,144,190,.08) 52%,
    rgba(128,93,200,.10)
  );

  box-shadow:
    0 12px 32px rgba(0,0,0,.10),
    inset 0 1px rgba(255,255,255,.38),
    inset 0 -1px rgba(112,216,247,.18);
  scroll-margin-top:110px;
}

.wbs-cmd-menu-guide-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:17px;
}

.wbs-cmd-menu-guide-heading h3 {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:1.35rem;
  font-weight:600;
  color:#fff;
}

.wbs-cmd-guide-icon {
  display:inline-block;
  flex:none;
  width:19px;
  height:19px;
  fill:none;
  stroke:#95e7ff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wbs-cmd-guide-title-icon {
  stroke:#c4a6ff;
}

#wbs-cmd-command-menu #wbs-cmd-guide-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid rgba(191,220,255,.37);
  border-radius:999px;
  background:rgba(75,87,145,.12);
  color:#d5cfe8;
  font-size:.8rem;
}

#wbs-cmd-guide-status::before {
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c8cbd7;
}

#wbs-cmd-guide-status[data-available="1"] {
  color:#c8ffe7;
  border-color:rgba(130,242,193,.45);
  background:rgba(45,168,135,.11);
}

#wbs-cmd-guide-status[data-available="1"]::before {
  background:#91f0c7;
  box-shadow:0 0 9px rgba(90,240,188,.35);
}

.wbs-cmd-menu-guide-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px 26px;
}

.wbs-cmd-menu-guide-grid > div {
  min-width:0;
}

.wbs-cmd-menu-guide-grid > div:not(.wbs-cmd-menu-guide-example) {
  padding-left:13px;
  border-left:1px solid rgba(149,231,255,.36);
}

.wbs-cmd-menu-guide-grid h4 {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 9px;
  font-size:.92rem;
  font-weight:600;
  color:#f6f3ff;
}

.wbs-cmd-menu-guide-grid p {
  margin:0;
  font-size:.89rem;
  line-height:1.68;
  font-weight:400;
  color:#e0ddf0;
  overflow-wrap:anywhere;
}

.wbs-cmd-menu-guide-example {
  grid-column:1/-1;
}

.wbs-cmd-menu-guide-command {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid rgba(185,216,255,.38);
  border-radius:13px;
  background:rgba(10,25,54,.32);
}

.wbs-cmd-menu-guide-command code {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.88rem;
  color:#c4f4ff;
}

#wbs-cmd-command-menu .wbs-cmd-menu-copy {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:39px;
  padding:7px 14px;
  border:1px solid rgba(193,222,255,.58);
  border-radius:11px;
  background:rgba(82,112,185,.20);
  color:#f6f3ff;
  font-weight:600;
  cursor:pointer;
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

#wbs-cmd-command-menu .wbs-cmd-menu-copy:hover {
  transform:translateY(-2px);
  border-color:#95e7ff;
  background:rgba(78,165,220,.25);
  box-shadow:0 6px 19px rgba(72,165,232,.14);
}

#wbs-cmd-command-menu .wbs-cmd-menu-copy:active,
#wbs-cmd-command-menu .wbs-cmd-menu-info:active {
  transform:translateY(0);
}

.wbs-cmd-menu-copy .wbs-cmd-guide-icon {
  width:16px;
  height:16px;
}

.wbs-cmd-menu-copy-status {
  min-height:1.3em;
  margin-top:5px!important;
  color:#9cefd2!important;
  font-size:.82rem!important;
}

/* Keyboard and accessibility */

#wbs-cmd-command-menu :is(summary,a,button):focus-visible {
  outline:2px solid #95e7ff;
  outline-offset:3px;
}

@media (max-width:650px) {
  details#wbs-cmd-command-menu.wbs-cmd-command-menu.liquid{
    padding:13px;
    border-radius:20px;
  }

  .wbs-cmd-menu-guide-grid {
    grid-template-columns:1fr;
    gap:17px;
  }

  .wbs-cmd-menu-chip {
    min-height:44px;
  }

  .wbs-cmd-menu-guide {
    padding:14px;
  }

  .wbs-cmd-menu-guide-heading h3 {
    font-size:1.15rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  #wbs-cmd-command-menu *,
  #wbs-cmd-command-menu *::before,
  #wbs-cmd-command-menu *::after {
    animation:none;
    transition:none;
    scroll-behavior:auto;
  }

  #wbs-cmd-command-menu .wbs-cmd-menu-chip:hover,
  #wbs-cmd-command-menu .wbs-cmd-menu-copy:hover {
    transform:none;
  }
}

@supports not (backdrop-filter:blur(1px)) {
  details#wbs-cmd-command-menu.wbs-cmd-command-menu.liquid{
    background:rgba(19,28,59,.78);
  }
}


/* WBS-VCS-15.8R: clip the glass effect to the approved shape */
#wbs-cmd-command-menu {
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--wbs-ui-radius-shell,26px);
  clip-path:inset(0 round var(--wbs-ui-radius-shell,26px));
}