/* "Install with Mixtape" (templates/mixtape.html, tools/pages.mjs), on every site: a button that opens the steps.
   The <details> is inline, so in a line of buttons its button sits next to the others and the opened steps take
   the whole width under them, the button staying where it was; a browser that keeps <details> a block puts the
   button under the others instead. Colours come from the page's own variables, with LAST LIGHT's as defaults. */
.mixtape { display: inline; }
.mx-toggle {
  display: inline-flex; align-items: center; gap: 0.55em; margin: 0; padding: 11px 24px;
  border: 1px solid var(--cyan, #5cecff); border-radius: 999px; cursor: pointer; list-style: none;
  background: rgba(92, 236, 255, 0.07); color: var(--text, #ece9ff); vertical-align: middle;
  font: italic 700 1.1rem/1.2 var(--display, "Exo 2", "Trebuchet MS", system-ui, sans-serif);
  -webkit-user-select: none; user-select: none;
}
.mx-toggle::-webkit-details-marker { display: none; }
.mx-toggle::after {
  content: ""; width: 0.42em; height: 0.42em; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-0.15em) rotate(45deg); transition: transform 0.15s;
}
.mixtape[open] > .mx-toggle::after { transform: translateY(0.12em) rotate(-135deg); }
.mx-toggle:hover, .mixtape[open] > .mx-toggle { background: rgba(92, 236, 255, 0.16); }
@media (prefers-reduced-motion: reduce) { .mx-toggle::after { transition: none; } }

.mx-panel {
  display: block; max-width: 720px; margin: 18px auto 0; padding: 20px 22px; text-align: left;
  font-size: 1rem; line-height: 1.6; color: var(--text, #ece9ff);
  background: var(--panel, rgba(28, 24, 74, 0.5)); border: 1px solid var(--border, rgba(190, 182, 230, 0.16)); border-radius: 12px;
}
.mx-panel p { margin: 0 0 0.8em; }
.mx-panel > :last-child { margin-bottom: 0; }
.mx-panel code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.88em; background: rgba(190, 182, 230, 0.1); padding: 0.1em 0.35em; border-radius: 5px; overflow-wrap: anywhere; }
.mx-steps { margin: 0 0 1em; padding-left: 1.4em; }
.mx-steps > li { margin: 0 0 0.9em; }
.mx-steps > li::marker { color: var(--cyan, #5cecff); font-weight: 700; }
.mx-note { color: var(--muted, #aaa3d8); font-size: 0.92rem; }

/* The line to paste: all of it in sight, even on a phone; one tap selects it (Copy needs JavaScript). */
.mx-line { display: flex; gap: 8px; align-items: stretch; margin: 0.6em 0 0.8em; }
.mx-panel .mx-line code {
  flex: 1; min-width: 0; display: block; margin: 0; padding: 10px 12px; font-size: 0.84rem; line-height: 1.5;
  background: rgba(7, 7, 26, 0.7); border: 1px solid var(--border, rgba(190, 182, 230, 0.16)); border-radius: 8px;
  white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.mx-copy {
  flex: none; padding: 0 16px; border: 1px solid var(--border, rgba(190, 182, 230, 0.16)); border-radius: 8px; cursor: pointer;
  background: rgba(92, 236, 255, 0.1); color: var(--text, #ece9ff); font: inherit; font-size: 0.9rem; font-weight: 600;
}
.mx-copy:hover { background: rgba(92, 236, 255, 0.2); }
.mx-copy[hidden] { display: none; }
.mx-file { margin: 0.6em 0; padding: 12px 14px; overflow-x: auto; background: rgba(7, 7, 26, 0.7); border: 1px solid var(--border, rgba(190, 182, 230, 0.16)); border-radius: 8px; }
.mx-panel .mx-file code { display: block; padding: 0; background: none; font-size: 0.8rem; line-height: 1.55; overflow-wrap: normal; white-space: pre; }

.mx-warn { padding: 10px 14px; border-left: 3px solid var(--ember, #ffb35c); background: rgba(255, 179, 92, 0.08); border-radius: 0 8px 8px 0; }
.mx-dev { margin-top: 1.2em; padding-top: 1.1em; border-top: 1px dashed var(--border, rgba(190, 182, 230, 0.16)); }
.mx-tag {
  display: inline-block; margin-right: 0.4em; padding: 1px 10px; border-radius: 999px; vertical-align: 0.08em;
  border: 1px solid rgba(255, 179, 92, 0.45); background: rgba(255, 179, 92, 0.14); color: #ffd29a;
  font: italic 700 0.82rem/1.5 var(--display, "Exo 2", "Trebuchet MS", system-ui, sans-serif); letter-spacing: 0.03em; text-transform: uppercase;
}
@media (max-width: 520px) {
  .mx-panel { padding: 16px 14px; }
  .mx-line { flex-direction: column; }
  .mx-copy { padding: 8px 16px; align-self: flex-start; }
}