/*
 * Layer-Stapel in 3D — das Aussehen zu scripts/stapel.js. Bühne, Quader und
 * Pausenknopf stehen in diagramm.css.
 *
 * data-ton färbt Station, Layer und Listeneintrag: grau, signatur, blau,
 * gelb, gruen, rot, kontrast.
 */

.syn-stapel {
  --ton: var(--syn-primary);
}

.syn-stapel [data-ton="grau"] { --ton: var(--syn-text-muted); }
.syn-stapel [data-ton="signatur"] { --ton: var(--syn-primary); }
.syn-stapel [data-ton="blau"] { --ton: var(--syn-info); }
.syn-stapel [data-ton="gelb"] { --ton: var(--syn-warning); }
.syn-stapel [data-ton="gruen"] { --ton: var(--syn-success); }
.syn-stapel [data-ton="rot"] { --ton: var(--syn-danger); }
.syn-stapel [data-ton="kontrast"] { --ton: var(--syn-text); }

.syn-stapel__dokument {
  transform-style: preserve-3d;
}

/* Boden: eine Glasplatte mit Punktraster */

.syn-stapel__boden > .syn-diagramm__oben {
  border-radius: 6px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--syn-primary) 35%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(135deg, color-mix(in srgb, var(--syn-primary) 16%, transparent), color-mix(in srgb, var(--syn-primary) 4%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--syn-primary) 50%, transparent),
    0 0 40px color-mix(in srgb, var(--syn-primary) 14%, transparent);
}

.syn-stapel__boden > :not(.syn-diagramm__oben) {
  background: color-mix(in srgb, var(--syn-primary) 40%, transparent);
}

/* Übergänge: gestrichelt, der gewählte Weg durchgezogen */

.syn-stapel__pfad {
  height: 0;
}

.syn-stapel__pfad > i {
  top: -1.5px;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--syn-text-muted) 70%, transparent) 0 6px, transparent 6px 12px);
  transition: background .4s;
}

.syn-stapel__pfad.ist-weg > i {
  background: linear-gradient(90deg, var(--syn-primary), color-mix(in srgb, var(--syn-primary) 55%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--syn-primary) 60%, transparent);
}

.syn-stapel__pfadtext {
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--syn-surface) 85%, transparent);
  color: var(--syn-text-muted);
  font: italic 400 11px/1.4 var(--syn-font-doc);
  white-space: nowrap;
  opacity: .55;
  transition: opacity .4s;
}

.syn-stapel__pfadtext.ist-weg {
  opacity: 1;
}

/* Stationen: Scheiben in der Farbe ihres Layers */

.syn-stapel__platz {
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ton) 30%, transparent), color-mix(in srgb, var(--ton) 10%, transparent) 70%);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--ton) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--ton) 25%, transparent);
}

.syn-stapel__glut {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ton) 35%, transparent);
  box-shadow: 0 0 28px 14px color-mix(in srgb, var(--ton) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

.syn-stapel__station {
  width: max-content;
  max-width: 140px;
  padding: 4px 9px 5px;
  border: 1px solid var(--syn-border);
  border-left: 3px solid var(--ton);
  border-radius: 6px;
  background: color-mix(in srgb, var(--syn-surface) 90%, transparent);
  box-shadow: var(--syn-shadow-card);
  color: var(--syn-text);
  font: 600 12.5px/1.25 var(--syn-font-display);
  text-align: center;
}

.md-typeset .syn-stapel__station small {
  display: block;
  margin-top: 1px;
  color: var(--syn-text-muted);
  font: 400 10.5px/1.3 var(--syn-font-doc);
}

/* Das Dokument: Layer als Blätter, oben hell mit Zeilen, an den Kanten in
   der Farbe ihrer Station */

.syn-stapel__schatten {
  width: 124px;
  height: 140px;
  transform: translate3d(-62px, -64px, 1.5px);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent);
  opacity: var(--deckkraft, 1);
}

.syn-stapel__blatt > * {
  opacity: var(--deckkraft, 1);
}

.syn-stapel__blatt > .syn-diagramm__oben {
  border-radius: 2px;
  background:
    linear-gradient(var(--ton), var(--ton)) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--syn-text-muted) 35%, transparent) 7px 8px) 8px 20px / calc(100% - 16px) calc(100% - 28px) no-repeat,
    var(--syn-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ton) 70%, transparent);
}

.syn-stapel__blatt > :not(.syn-diagramm__oben) {
  background: color-mix(in srgb, var(--ton) 75%, var(--syn-secondary));
}

.syn-stapel__blatt.ist-neu > .syn-diagramm__oben {
  box-shadow:
    inset 0 0 0 1px var(--ton),
    0 0 22px 4px color-mix(in srgb, var(--ton) 55%, transparent);
}

.syn-stapel__marke {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--ton) 70%, transparent);
  border-radius: 999px;
  background: var(--syn-surface);
  box-shadow: var(--syn-shadow-card);
  color: var(--syn-text);
  font: 600 12px/1.2 var(--syn-font-display);
  white-space: nowrap;
  transition: opacity .3s;
}

.syn-stapel__marke::before {
  content: "+";
  color: var(--ton);
  font-weight: 700;
}

.syn-stapel__signiert {
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--syn-success) 16%, transparent);
  color: var(--syn-success);
  font: 600 10px/1.4 var(--syn-font-doc);
  letter-spacing: .02em;
}

/* Leiste unter der Bühne: Wege und der Stapel als Liste */

.syn-stapel__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  margin-top: .4rem;
  padding-right: 2.4rem;
}

.syn-stapel__wege {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--syn-border);
  border-radius: 999px;
  background: var(--syn-surface);
}

.syn-stapel__weg {
  padding: .25rem .7rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--syn-text-muted);
  font: 500 .62rem/1.3 var(--syn-font-display);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.syn-stapel__weg[aria-pressed="true"] {
  background: color-mix(in srgb, var(--syn-primary) 18%, transparent);
  color: var(--syn-text);
}

.syn-stapel__weg:hover,
.syn-stapel__weg:focus-visible {
  color: var(--syn-text);
}

.md-typeset ol.syn-stapel__layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset ol.syn-stapel__layer > li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: .15rem .45rem;
  border-left: 3px solid var(--ton);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ton) 10%, transparent);
  font: 500 .6rem/1.3 var(--syn-font-display);
  animation: syn-stapel-dazu .4s ease-out;
}

@keyframes syn-stapel-dazu {
  from { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset ol.syn-stapel__layer > li {
    animation: none;
  }
}