/* =========================================================
   Geteilte Sandbox-Bausteine: Auswahlfeld, Hinweis, Dialog.
   Verhalten kommt aus sandbox.js, das Aussehen setzt jede Welt
   über diese Variablen auf ihrem eigenen Wurzelelement.

   Diese Bausteine gehören in eine Welt. Landet doch einmal einer
   daneben, hielten die Variablen bisher nichts, Menüs erschienen
   ohne Fläche und ohne Rahmen. Deshalb steht derselbe Satz auch
   auf :root, als Auffanglinie. Jede Welt überschreibt ihn.
   ========================================================= */

:root,
.world {
  --sbx-bg:      #ffffff;
  --sbx-fg:      #17191f;
  --sbx-muted:   #6b6f79;
  --sbx-line:    #e3e1d9;
  --sbx-acc:     #1f3fd0;
  --sbx-acc-fg:  #ffffff;
  --sbx-radius:  12px;
  --sbx-radius-sm: 8px;
  --sbx-shadow:  0 2px 6px rgba(0,0,0,.06), 0 16px 34px -12px rgba(0,0,0,.24);
  --sbx-font:    inherit;
  --sbx-ease:    cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   Auswahlfeld
   ========================================================= */
.sbx-select { position: relative; display: inline-block; min-width: 0; }

.sbx-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .7em;
  width: 100%;
  min-width: 0;
  font-family: var(--sbx-font);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  color: var(--sbx-fg);
  background: var(--sbx-bg);
  border: 1px solid var(--sbx-line);
  border-radius: var(--sbx-radius);
  padding: .62em 1em;
  cursor: pointer;
  transition: border-color .18s var(--sbx-ease), box-shadow .18s var(--sbx-ease), background-color .18s var(--sbx-ease);
}
.sbx-select-btn:hover { border-color: var(--sbx-acc); }
.sbx-select-btn[aria-expanded="true"] {
  border-color: var(--sbx-acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbx-acc) 18%, transparent);
}
.sbx-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sbx-select-caret {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--sbx-muted);
  transition: transform .22s var(--sbx-ease), color .18s var(--sbx-ease);
}
.sbx-select-caret svg { width: 11px; height: 8px; display: block; }
.sbx-select-btn[aria-expanded="true"] .sbx-select-caret { transform: rotate(180deg); color: var(--sbx-acc); }

/* Das Menü sitzt in der Overlay-Ebene der Welt und liegt damit über allem. */
.sbx-select-menu {
  position: absolute;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sbx-bg);
  border: 1px solid var(--sbx-line);
  border-radius: var(--sbx-radius);
  box-shadow: var(--sbx-shadow);
  padding: 5px;
  font-family: var(--sbx-font);
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: top center;
  transition: opacity .16s var(--sbx-ease), transform .16s var(--sbx-ease);
}
.sbx-select-menu.is-up { transform: translateY(6px) scale(.985); transform-origin: bottom center; }
.sbx-select-menu.is-in { opacity: 1; transform: none; }

.sbx-opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  padding: .58em .8em;
  border-radius: var(--sbx-radius-sm);
  font-size: .87rem;
  color: var(--sbx-fg);
  cursor: pointer;
  transition: background-color .12s var(--sbx-ease), color .12s var(--sbx-ease);
}
.sbx-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbx-opt-hint { flex-shrink: 0; font-size: .76rem; color: var(--sbx-muted); }
.sbx-opt.is-active { background: color-mix(in srgb, var(--sbx-acc) 11%, transparent); }
.sbx-opt.is-sel { font-weight: 600; color: var(--sbx-acc); }
.sbx-opt.is-sel.is-active { background: var(--sbx-acc); color: var(--sbx-acc-fg); }
.sbx-opt.is-sel.is-active .sbx-opt-hint { color: color-mix(in srgb, var(--sbx-acc-fg) 75%, transparent); }
.sbx-opt.is-disabled { opacity: .4; cursor: not-allowed; }

/* =========================================================
   Sprechblase am Zeiger
   Ersetzt das title-Attribut. Der Browser zeichnet dafuer sonst
   seinen eigenen gelben Kasten, in eigener Schrift, mit eigener
   Verzoegerung und nur fuer die Maus. Farben kommen aus der Welt.
   ========================================================= */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--sbx-fg);
  color: var(--sbx-bg);
  font-family: var(--sbx-font);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  padding: .42em .7em;
  border-radius: var(--sbx-radius-sm);
  white-space: nowrap;
  box-shadow: var(--sbx-shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 55;
  transition: opacity .16s var(--sbx-ease), transform .16s var(--sbx-ease);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
/* gesperrte Knoepfe nehmen sonst keine Zeigerereignisse an */
[data-tip][disabled] { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  [data-tip]::after { transition: none; }
}

/* =========================================================
   Hinweise (Toasts)
   ========================================================= */
.sbx-toasts {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(92%, 420px);
  pointer-events: none;
}
.sbx-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .7em;
  font-family: var(--sbx-font);
  font-size: .87rem;
  font-weight: 500;
  line-height: 1.35;
  color: #f6f6f8;
  background: rgba(22, 24, 30, .95);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  padding: .68em 1.25em;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.96);
  transition: opacity .24s var(--sbx-ease), transform .24s var(--sbx-ease);
  text-align: left;
}
.sbx-toast.is-in { opacity: 1; transform: none; }
.sbx-toast.is-good { border-color: color-mix(in srgb, var(--sbx-acc) 60%, transparent); }
.sbx-toast.is-warn { border-color: rgba(232, 160, 60, .7); }
.sbx-toast-ico { display: inline-flex; flex-shrink: 0; color: var(--sbx-acc); }
.sbx-toast-ico svg { width: 15px; height: 15px; display: block; }
.sbx-toast.is-warn .sbx-toast-ico { color: #ffb454; }

/* =========================================================
   Dialog
   ========================================================= */
.sbx-backdrop {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(14, 16, 21, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s var(--sbx-ease);
}
.sbx-backdrop.is-in { opacity: 1; }

.sbx-dialog {
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  background: var(--sbx-bg);
  color: var(--sbx-fg);
  font-family: var(--sbx-font);
  border: 1px solid var(--sbx-line);
  border-radius: calc(var(--sbx-radius) * 1.4);
  padding: 26px 26px 22px;
  box-shadow: var(--sbx-shadow);
  transform: translateY(10px) scale(.97);
  transition: transform .24s var(--sbx-ease);
}
.sbx-backdrop.is-in .sbx-dialog { transform: none; }

.sbx-dialog-badge {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sbx-acc);
  background: color-mix(in srgb, var(--sbx-acc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sbx-acc) 34%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.sbx-dialog-title {
  font-size: 1.16rem;
  line-height: 1.24;
  letter-spacing: -.02em;
  margin: 0;
}
.sbx-dialog-text {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--sbx-muted);
  margin: 10px 0 0;
}
.sbx-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.sbx-btn {
  font-family: var(--sbx-font);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .68em 1.25em;
  border-radius: var(--sbx-radius);
  border: 1px solid var(--sbx-line);
  background: transparent;
  color: var(--sbx-fg);
  cursor: pointer;
  transition: background-color .18s var(--sbx-ease), border-color .18s var(--sbx-ease),
              color .18s var(--sbx-ease), transform .18s var(--sbx-ease);
}
.sbx-btn:hover { border-color: var(--sbx-fg); transform: translateY(-1px); }
.sbx-btn.is-primary {
  background: var(--sbx-acc);
  border-color: var(--sbx-acc);
  color: var(--sbx-acc-fg);
}
.sbx-btn.is-primary:hover { filter: brightness(1.08); }
.sbx-btn.is-danger { color: #c0392b; border-color: color-mix(in srgb, #c0392b 40%, transparent); }
.sbx-btn.is-danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

/* Sichtbarer Fokus auch innerhalb der Welten */
.world :focus-visible {
  outline: 2.5px solid var(--sbx-acc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sbx-toast, .sbx-dialog, .sbx-select-menu, .sbx-backdrop { transition-duration: .001ms !important; }
}