/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Minimal defaults in case Tailwind isn't ready */
:root { color-scheme: dark; }
.demo-canvas {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  display: block;
  position: relative;
}

/* PrismJS minimal dark tweaks */
pre code { display: block; white-space: pre; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: 0.9rem; line-height: 1.4em !important; }
pre { background: #0a0a0a; border: 1px solid #1a1a1a; border-radius: 8px; padding: 12px; overflow-x: auto; overflow-y: auto; position: relative; --code-line-height: 1.4em; }
code[class*="language-"] { color: #e6ffe1; line-height: 1.4em !important; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6b8f6a; }
.token.punctuation { color: #a3bfa0; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #9bdc6e; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a8e47c; }
.token.operator, .token.entity, .token.url { color: #c4d7c2; }
.token.atrule, .token.attr-value, .token.keyword { color: #79bf4d; }
.token.function, .token.class-name { color: #d2f0ce; }
.token.regex, .token.important, .token.variable { color: #d1f4c4; }

/* Fallback styles for copy controls and line numbers (in case Tailwind build hasn't run) */
/* Hide Prism toolbar */
.prism-toolbar { display: none !important; }
.code-toolbar > .toolbar { display: none !important; }
pre { position: relative; }
.code-copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(17,17,17,0.9);
  color: #e6ffe1;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
pre:hover .code-copy-btn { opacity: .96; }
.code-copy-btn:hover { background: rgba(28,28,28,0.95); }
.copy-bubble {
  position: absolute; top: 8px; right: 52px; z-index: 2; pointer-events: none;
  background: rgba(155,220,110,0.18);
  border: 1px solid rgba(121,191,77,0.5);
  color: #e6ffe1;
  border-radius: 999px; padding: 2px 8px; font-size: 12px;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease;
}
.copy-bubble.show { opacity: 1; transform: translateY(0); }

/* Custom gutter-based line numbers (fallback) */
pre.has-gutter { position: relative; background-clip: content-box; background-origin: content-box; }
.code-gutter { position: absolute; top: 12px; left: 12px; width: 2.75em; text-align: right; padding-right: .5em; border-right: 1px solid #1a1a1a; color: #a3bfa0; }
.code-gutter span { display: block; height: var(--code-line-height); line-height: var(--code-line-height); }

/* Zebra striping per logical line via gradient */
pre.has-gutter {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0,
    rgba(255,255,255,0.02) var(--code-line-height),
    rgba(255,255,255,0.00) var(--code-line-height),
    rgba(255,255,255,0.00) calc(var(--code-line-height) * 2)
  );
}