/* ============================================================
   Rayvn — Erstellen-Dialog

   Alle Bewegungen laufen über transform und opacity. Beides wird
   vom Compositor erledigt und löst kein Layout aus — deshalb
   bleibt der Dialog auch mit vielen Karten flüssig.
   ============================================================ */

.createdialog{
  position:fixed;top:50%;left:50%;z-index:65;
  width:min(680px,94vw);max-height:min(88vh,760px);
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-48%) scale(.97);
  transition:opacity .2s ease,transform .26s cubic-bezier(.32,.72,0,1);
}
.createdialog.on{
  opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}

/* ── Kopf mit gleitendem Segment ── */
.cd-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 14px 14px 16px;flex:none;
  border-bottom:1px solid var(--line-soft);
}
.cd-seg{
  position:relative;display:flex;gap:2px;padding:3px;
  background:var(--sunken);border-radius:9px;
}
.cd-seg-marker{
  position:absolute;top:3px;left:3px;
  width:calc(50% - 3px);height:calc(100% - 6px);
  border-radius:7px;background:var(--accent);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.cd-seg button{
  position:relative;z-index:1;
  padding:5px 16px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:var(--muted);
  transition:color .2s;
}
.cd-seg button[aria-selected="true"]{color:var(--accent-ink)}
.cd-close{margin-left:auto}
.cd-close svg{stroke-width:2.2}

/* ── Scrollbereich ── */
.cd-scroll{overflow-y:auto;padding:4px 16px 8px;flex:1;min-height:0}
.cd-block{padding:14px 0}
.cd-block + .cd-block{border-top:1px solid var(--line-soft)}
.cd-titel{
  font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;
}

/* ── Sprachkarten ── */
.cd-grid{
  display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
}
.cd-karte{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:11px 12px 10px;
  border-radius:11px;
  background:var(--sunken);
  border:1px solid var(--line-soft);
  text-align:left;
  transition:transform .18s cubic-bezier(.32,.72,0,1),
             border-color .18s, background .18s;
  animation:cdKarteRein .34s cubic-bezier(.32,.72,0,1) backwards;
  animation-delay:var(--verzug,0ms);
}
@keyframes cdKarteRein{
  from{opacity:0;transform:translateY(9px) scale(.97)}
}
.cd-karte:hover{transform:translateY(-2px);border-color:var(--line)}
.cd-karte:active{transform:translateY(0) scale(.985)}
.cd-karte[aria-selected="true"]{
  border-color:var(--karte-farbe);
  background:color-mix(in srgb,var(--karte-farbe) 12%,var(--sunken));
}
/* Der farbige Rand wächst aus der Mitte, statt hart umzuschalten */
.cd-karte::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  border-radius:99px;background:var(--karte-farbe);
  transform:scaleX(0);transform-origin:center;
  transition:transform .26s cubic-bezier(.32,.72,0,1);
}
.cd-karte[aria-selected="true"]::after{transform:scaleX(1)}

.cd-kuerzel{
  font-family:var(--code-font);font-size:15px;font-weight:700;
  color:var(--karte-farbe);line-height:1.2;
}
.cd-kartenname{font-size:12.5px;font-weight:500;color:var(--text-strong)}
.cd-lauf{
  margin-top:3px;font-size:9.5px;font-weight:600;letter-spacing:.03em;
  padding:1.5px 6px;border-radius:99px;
  background:color-mix(in srgb,var(--ok) 18%,transparent);
  color:var(--ok);
}

/* ── Vorlagen ── */
.cd-vorlagen{display:flex;flex-direction:column;gap:5px;transition:opacity .11s,transform .11s}
.cd-vorlagen.wechsel{opacity:0;transform:translateY(5px)}
.cd-vorlage{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:10px;
  background:var(--sunken);border:1px solid var(--line-soft);
  text-align:left;
  transition:border-color .18s,background .18s,transform .18s;
  animation:cdKarteRein .3s cubic-bezier(.32,.72,0,1) backwards;
  animation-delay:var(--verzug,0ms);
}
.cd-vorlage:hover{border-color:var(--line);transform:translateX(2px)}
.cd-vorlage[aria-selected="true"]{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--sunken));
}
.cd-haken{
  width:19px;height:19px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  border:1.5px solid var(--line);color:transparent;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
.cd-haken svg{width:11px;height:11px;stroke-width:2.6}
.cd-vorlage[aria-selected="true"] .cd-haken{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  transform:scale(1.06);
}
.cd-vtext{display:flex;flex-direction:column;gap:1px;min-width:0}
.cd-vname{font-size:12.5px;font-weight:500;color:var(--text-strong);display:flex;align-items:center;gap:7px}
.cd-vname em{
  font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.03em;
  padding:1px 6px;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent);
}
.cd-vbeschreibung{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-vzahl{
  margin-left:auto;flex:none;
  font-family:var(--code-font);font-size:10.5px;color:var(--faint);
}
.cd-leer{font-size:12px;color:var(--muted);line-height:1.55;padding:6px 2px}

/* ── Namensfeld ── */
.cd-namefeld{
  display:flex;align-items:center;
  background:var(--sunken);border:1px solid var(--line-soft);
  border-radius:9px;padding:0 12px;
  transition:border-color .18s,box-shadow .18s;
}
.cd-namefeld:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.cd-namefeld input{
  flex:1;padding:9px 0;background:none;border:0;outline:none;
  color:var(--text-strong);font-size:13.5px;font-family:var(--code-font);
}
.cd-endung{
  font-family:var(--code-font);font-size:13.5px;color:var(--faint);flex:none;padding-left:2px;
}
.cd-vorschau{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:9px;font-size:11.5px;color:var(--muted);
}
.cd-vorschau-titel{color:var(--faint)}
.cd-vorschau code{
  font-family:var(--code-font);font-size:11px;
  padding:2px 7px;border-radius:5px;
  background:var(--hover);color:var(--text);
  animation:cdKarteRein .26s cubic-bezier(.32,.72,0,1) backwards;
}

/* ── Fuß ── */
.cd-foot{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;flex:none;
  border-top:1px solid var(--line-soft);
  background:var(--panel);
}
.cd-notiz{font-size:11.5px;color:var(--muted);flex:1;min-width:0}
.cd-notiz[data-lauf="python"]::before,
.cd-notiz[data-lauf="browser"]::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:7px;vertical-align:middle;
}
.cd-actions{display:flex;gap:7px;flex:none}
.cd-actions .btn{padding:7px 14px}
.cd-actions .btn kbd{margin-left:7px;background:#0002;border-color:#0003;color:inherit;opacity:.7}
.cd-actions .btn[disabled]{opacity:.45;cursor:not-allowed}

@media (max-width:560px){
  .cd-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .cd-vzahl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .createdialog,.cd-karte,.cd-vorlage,.cd-seg-marker,.cd-vorlagen,.cd-vorschau code{
    animation:none !important;transition:opacity .01ms !important;
  }
}