[x-cloak] { display: none !important; }

/*
 * Tailwind CDN only scans markup it sees; arbitrary utilities referenced from external JS are
 * often NOT emitted — those nodes then stack only by DOM order and can cover floating help panels.
 */
#as-export-feedback-stack {
  z-index: 310 !important;
}

[data-section-help-panel] {
  z-index: 50001 !important;
}

#as-bucket-hover-tip {
  z-index: 60000 !important;
}

#as-section-help-layer {
  z-index: 50000 !important;
  position: fixed;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}

#ms-dialog::backdrop,
#tg-dialog::backdrop,
#tg-tool-call-dialog::backdrop,
#tg-tc-invoke-dialog::backdrop,
#tg-tc-invoke-dialog::backdrop,
#theme-creator-dialog::backdrop {
  background: rgb(0 0 0 / 0.5);
}

/* Heading tiers + model picker label — plain CSS (not inside a script tag). */
.as-h1 {
  color: rgb(var(--as-heading-1) / 1);
}
.as-h2 {
  color: rgb(var(--as-heading-2) / 1);
}
.as-h3 {
  color: rgb(var(--as-heading-3) / 1);
}
.as-h4 {
  color: rgb(var(--as-heading-4) / 1);
}
.as-h5 {
  color: rgb(var(--as-heading-5) / 1);
}
.as-h6 {
  color: rgb(var(--as-heading-6) / 1);
}
.js-mp-value-label.as-mp-empty {
  color: rgb(var(--as-text) / 0.42);
}
.js-mp-value-label.as-mp-filled {
  color: rgb(var(--as-text-accent) / 1);
}

/* Trigger graph SVG edges respect light/dark (stroke set in CSS, not inlined rgb). */
.as-tg-edge-path {
  fill: none;
  stroke: rgb(37 99 235);
  stroke-width: 1.5;
  opacity: 0.9;
}

html.dark .as-tg-edge-path {
  stroke: rgb(96 165 250);
}

.as-tg-connect-preview {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 4;
  opacity: 0.95;
  stroke: rgb(245 158 11);
}

html.dark .as-tg-connect-preview {
  stroke: rgb(251 191 36);
}

.as-tg-palette-scroll {
  overscroll-behavior: contain;
}

#tg-canvas-wrap {
  overscroll-behavior: contain;
}

.as-tg-zoom-cluster {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.as-tg-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-bottom: 1px solid rgb(var(--as-border) / 1);
  background: transparent;
  color: rgb(var(--as-text) / 1);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.as-tg-zoom-btn:last-child {
  border-bottom: 0;
}

.as-tg-zoom-btn:hover {
  background: rgb(var(--as-inner) / 0.55);
}

.as-tg-zoom-reset {
  font-size: 0.75rem;
}

.as-tg-joystick {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--as-border-strong) / 1);
  background: rgb(var(--as-surface) / 0.92);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  cursor: grab;
  touch-action: none;
}

.as-tg-joystick:active {
  cursor: grabbing;
}

.as-tg-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.375rem;
  height: 1.375rem;
  margin: -0.6875rem 0 0 -0.6875rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--as-border-strong) / 1);
  background: rgb(var(--as-accent-text) / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  pointer-events: none;
  transition: transform 0.05s linear;
}

/* Trigger graph inline policy badges + preview denied overlay */
[data-tg-nid]:not([data-tg-nid="__root"]) {
  position: absolute;
}

.as-tg-policy-allowed {
  box-shadow: 0 0 0 1px rgb(16 185 129 / 0.35);
}

.as-tg-policy-audit {
  box-shadow: 0 0 0 2px rgb(245 158 11 / 0.55);
}

.as-tg-policy-denied,
.as-tg-policy-preview-denied {
  box-shadow: 0 0 0 2px rgb(239 68 68 / 0.65);
}

.as-tg-policy-preview-denied::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(239 68 68 / 0.18);
  pointer-events: none;
  z-index: 12;
}

.as-tg-policy-preview-denied::before {
  content: "✕";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(239 68 68 / 0.85);
  pointer-events: none;
  z-index: 13;
  line-height: 1;
}

.as-tg-policy-simulate-mode [data-tg-nid]:not([data-tg-nid="__root"]).as-tg-policy-denied {
  animation: as-tg-policy-pulse 1.2s ease-in-out infinite;
}

@keyframes as-tg-policy-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgb(239 68 68 / 0.45);
  }
  50% {
    box-shadow: 0 0 0 3px rgb(239 68 68 / 0.75);
  }
}