/* Mixer chrome: per-section switcher pills, the Line-up panel, placeholders.
   Everything here is prefixed .mxui- so it can't collide with module CSS. */

.mx-slot { position: relative; }

/* The switcher bar is a zero-height sticky row at the top of each slot, so the pill
   stays reachable while you scroll through a long (pinned) section. */
.mxui-bar { position: sticky; top: 72px; height: 0; z-index: 45; pointer-events: none; }
.mx-slot[data-section="hero"] > .mxui-bar { top: 72px; }
.mxui-pill {
  position: absolute; right: 16px; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 3px;
  border-radius: 999px; background: rgba(15,23,42,.86); color: #F8FAFC;
  font: 500 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.2), 0 8px 24px rgba(15,23,42,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease;
}
.mx-slot:hover > .mxui-bar .mxui-pill, .mxui-pill:focus-within, .mxui-pill.mxui-flash, body.mxui-show-all .mxui-pill { opacity: 1; transform: none; }
@media (hover: none) { .mxui-pill { opacity: .9; transform: none; } }
.mxui-pill button { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: #CBD5E1; }
.mxui-pill button:hover { background: rgba(255,255,255,.12); color: #fff; }
.mxui-pill button:focus-visible { outline: 2px solid #91B682; outline-offset: 1px; }
.mxui-pill .mxui-sec { color: #94A3B8; padding: 0 2px 0 8px; }
.mxui-pill .mxui-label { padding: 0 4px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.mxui-pill .mxui-n { color: #94A3B8; font-variant-numeric: tabular-nums; padding-right: 2px; }
@media (max-width: 720px) { .mxui-pill .mxui-sec { display: none; } .mxui-pill { right: 10px; } }

/* Line-up launcher + panel */
.mxui-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 70; height: 38px; padding: 0 14px 0 12px;
  border: 0; border-radius: 999px; background: #0F172A; color: #fff; cursor: pointer;
  font: 600 13px/1 Inter, system-ui, sans-serif; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 4px rgba(15,23,42,.2), 0 12px 32px rgba(15,23,42,.24);
}
.mxui-fab i { width: 8px; height: 8px; border-radius: 50%; background: #91B682; display: block; }
.mxui-fab:focus-visible { outline: 2px solid #91B682; outline-offset: 2px; }
.mxui-panel {
  position: fixed; right: 16px; bottom: 64px; z-index: 70; width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 96px); overflow: auto; border-radius: 16px; background: #fff; color: #0F172A;
  border: 1px solid #E2E8F0; box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 24px 64px rgba(15,23,42,.22);
  font: 400 13px/1.45 Inter, system-ui, sans-serif; padding: 14px 14px 12px;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.mxui-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.mxui-panel h2 { font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.mxui-panel h2 small { font-weight: 500; color: #64748B; font-size: 12px; }
.mxui-rows { margin-top: 10px; display: grid; gap: 2px; }
.mxui-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 6px 6px; border-radius: 8px; }
.mxui-row:hover { background: #F7F8FA; }
.mxui-row .k { color: #94A3B8; font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; }
.mxui-row a { color: #0F172A; text-decoration: none; display: block; min-width: 0; }
.mxui-row a b { font-weight: 600; display: block; font-size: 12px; color: #475569; }
.mxui-row a span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxui-row a span.ph { color: #94A3B8; font-style: italic; }
.mxui-row .ctl { display: inline-flex; gap: 2px; align-items: center; color: #94A3B8; font-size: 12px; font-variant-numeric: tabular-nums; }
.mxui-row .ctl button { all: unset; cursor: pointer; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #475569; font-size: 15px; }
.mxui-row .ctl button:hover { background: #E2E8F0; }
.mxui-row .ctl button:focus-visible { outline: 2px solid #4F7A40; }
.mxui-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E2E8F0; align-items: center; flex-wrap: wrap; }
.mxui-actions button { all: unset; cursor: pointer; height: 32px; padding: 0 12px; border-radius: 8px; font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; }
.mxui-actions .primary { background: #91B682; color: #14201A; }
.mxui-actions .ghost { color: #475569; border: 1px solid #E2E8F0; }
.mxui-actions button:focus-visible { outline: 2px solid #4F7A40; outline-offset: 1px; }
.mxui-copybox { display: block; width: 100%; height: 140px; margin-top: 10px; padding: 8px; border: 1px solid #E2E8F0; border-radius: 8px; font: 12px/1.45 ui-monospace, monospace; color: #0F172A; resize: vertical; }
.mxui-actions .msg { color: #4F7A40; font-weight: 600; font-size: 12px; }

/* Placeholder for sections that have no module yet */
.mxui-placeholder { padding: 96px 0; border-top: 1px dashed #CBD5E1; background: repeating-linear-gradient(135deg, #fff 0 14px, #F8FAFC 14px 28px); }
.mxui-placeholder .box { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mxui-placeholder .n { font: 600 13px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #4F7A40; }
.mxui-placeholder h2 { font: 600 32px/1.15 Inter, sans-serif; letter-spacing: -0.02em; margin-top: 10px; color: #94A3B8; }
.mxui-placeholder p { margin-top: 8px; color: #94A3B8; font-size: 15px; }

/* Missing-module / error card */
.mxui-error { max-width: 1200px; margin: 24px auto; padding: 16px 24px; border: 1px solid #FCA5A5; background: #FEF2F2; color: #991B1B; border-radius: 12px; font: 500 14px/1.5 Inter, sans-serif; }

/* Single fixed switcher (bottom, beside Line-up). Per-slot bars stay in the DOM but only
   show via "Show all switchers". */
.mxui-bar { display: none; }
body.mxui-show-all .mxui-bar { display: block; }
.mxui-cur { position: fixed; left: 50%; bottom: 16px; z-index: 70; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.mxui-cur.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mxui-cur .mxui-pill { background: rgba(15,23,42,.95); position: static; opacity: 1; transform: none; height: 38px; padding: 0 5px; font-size: 13px; }
.mxui-cur .mxui-pill button { width: 30px; height: 30px; font-size: 18px; }
@media (max-width: 720px) {
  .mxui-cur { left: 12px; right: 124px; transform: translateY(8px); }
  .mxui-cur.on { transform: none; }
  .mxui-cur .mxui-pill { max-width: 100%; }
  .mxui-cur .mxui-pill .mxui-label { flex: 1; min-width: 0; max-width: none; }
  .mxui-fab { right: 12px; }
}