/* ============================================================
   ELANUM Resonanzrad · Darstellung
   Setzt tokens.css und base.css voraus. Mobile-first.
   ============================================================ */

.rad{--turn:420ms;display:grid;gap:clamp(40px,6vw,72px);align-items:start}
.rad__stage{display:grid;gap:24px;justify-items:center}

.rad__wheel{position:relative;width:min(100%,520px);aspect-ratio:1}
.rad__track,.rad__plate,.rad__center{position:absolute;border-radius:50%}
.rad__track{background:var(--canvas);box-shadow:var(--pressed)}
.rad__plate{background:var(--canvas);box-shadow:var(--raised)}
.rad__center{display:grid;place-items:center;z-index:1;background:linear-gradient(135deg,#FAF6ED,#EBE4D7);box-shadow:var(--raised-sm);font:var(--type-title);font-size:32px;pointer-events:none}
.rad__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rad__rotor{transform-box:view-box;transform-origin:160px 160px;transition:transform var(--turn) var(--ease)}
.rad__icon{transform-box:view-box;transition:transform var(--turn) var(--ease)}
.rad__rotor.is-still,.rad__icon.is-still{transition:none}
.rad.is-entering *{transition:none!important}

/* Ring: alle drei Bereiche gleich stark, nichts wird hervorgehoben.
   Schrift in Ink und echten 15 px, egal wie gross das Rad ist. */
.rad__band{fill:var(--band)}
.rad__ring-label{font:600 calc(15px * var(--u,1)) var(--ui-font);fill:var(--ink);pointer-events:none}

/* Stücke: Fugen in Scheibenfarbe. Farbe heisst ausgefüllt, grau mit Strich und Plus heisst offen. */
.rad__face{stroke:var(--canvas);stroke-width:2.4;stroke-linejoin:round;cursor:pointer;transition:transform var(--motion-ui) ease}
.rad__contour{fill:none;stroke:var(--ink-2);stroke-width:var(--trace);stroke-linecap:round;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;pointer-events:none}
.rad__icon{color:var(--ink);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.rad__glyph *{vector-effect:non-scaling-stroke}
.rad__name-in,.rad__result-in{stroke:none;fill:var(--ink);font:600 calc(15px * var(--u,1))/1 var(--ui-font)}
.rad__result-in{font-weight:500}
.rad__icon.is-open{color:var(--ink-2)}
.rad__icon.is-open .rad__name-in{fill:var(--ink-2)}
/* Plus: eine Farbe (Ink), weisses Kreuz, nie über Name oder Icon (eigene Zeile). */
.rad__plus circle{fill:var(--ink);stroke:none}
.rad__plus path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rad:not(.is-compact) .rad__glyph,.rad.is-compact .rad__name-in,.rad.is-compact .rad__result-in,.rad.is-tiny .rad__plus{display:none}
/* Auswahlbogen: Farbe des Bereichs, glüht im Atemtakt in derselben Farbe. */
.rad__active{fill:none;stroke:var(--arc,var(--ink));stroke-width:4.5;stroke-linecap:round;pointer-events:none;transition:stroke var(--motion-ui) ease;animation:arc-glow var(--motion-breath) ease-in-out infinite}
@keyframes arc-glow{0%,100%{filter:drop-shadow(0 0 1.5px color-mix(in srgb,var(--arc,var(--ink)) 45%,transparent))}43%{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--arc,var(--ink)) 70%,transparent))}}
body[data-motion=off] .rad__active{animation-play-state:paused}
.rad__lift{stroke:var(--canvas);stroke-width:1;pointer-events:none;transition:opacity var(--motion-ui) ease}
.is-turning .rad__lift{opacity:0;transition:none}
@media(hover:hover) and (pointer:fine){.rad__face:hover{transform:translate(var(--ox),var(--oy))}}

.rad__nav{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(100%,520px)}
.rad__current{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;text-align:left}
.rad__current .icon{color:var(--tone)}
.rad__current strong{display:block;font:var(--type-label);font-weight:600}
.rad__current span span{display:block;font:var(--type-label);color:var(--ink-2)}
.rad__overview{display:grid;gap:20px}
.rad__progress{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;color:var(--ink-2)}
.rad__legend{display:inline-flex;gap:20px}
.rad__legend>span{display:inline-flex;align-items:center;gap:8px}
.rad__legend .rad__swatch{display:inline-block}

/* Lesebereich */
.rad__reader{display:grid;gap:18px;align-content:start;max-width:var(--measure)}
.rad__name{margin-top:4px}
.rad__text{max-width:var(--measure)}
.rad__result{margin-top:12px;padding:24px 28px;border-radius:var(--radius-surface);background:var(--tint);box-shadow:var(--raised-sm)}
.rad__result .t-label{color:var(--tone)}
.rad__result dl{display:grid;gap:10px;margin-top:14px}
.rad__result dl div{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:16px}
.rad__result dt{font:var(--type-label);color:var(--ink-2);padding-top:2px}
.rad__result dd{margin:0;font:var(--type-heading)}
.rad__open{display:grid;gap:18px;justify-items:start;margin-top:12px}
.rad__note:empty{display:none}

/* Liste: Namen, Status, Auswahl. Sie ist die Tastatur-Bedienung des Rads. */
.rad__list{display:grid;gap:32px}
.rad__group{display:grid;gap:12px}
.rad__items{display:grid;gap:6px}
.rad__item{display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:52px;padding:10px 16px;border:0;border-radius:var(--radius-control);background:transparent;text-align:left;font:var(--type-label);transition:background var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
.rad__item .icon{color:var(--tone)}
.rad__item-name{font-weight:600}
.rad__item-state{color:var(--ink-2);white-space:nowrap}
.rad__item.is-open .rad__item-name,.rad__item.is-open .icon{color:var(--ink-2)}
.rad__fill-cta{color:var(--ink);font-weight:600;padding:4px 10px;margin:-4px -10px -4px 0;border-radius:var(--radius-control);transition:background var(--motion-ui) ease}
@media(hover:hover) and (pointer:fine){.rad__item:hover .rad__fill-cta{background:#FFFFFFA6;text-decoration:underline;text-underline-offset:4px}}
.rad__swatch{width:18px;height:18px;border-radius:50%;background:var(--offen);border:var(--trace) dashed var(--ink-2)}
.rad__swatch.is-done{background:var(--swatch);border:0}
.rad__item[aria-selected=true]{background:var(--tint);box-shadow:var(--raised-sm)}
@media(hover:hover) and (pointer:fine){.rad__item:hover{background:var(--tint)}}

@media(min-width:900px){
  .rad{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(48px,6vw,96px)}
  .rad__overview{grid-column:1 / -1}
  .rad__list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px}
}
/* Ab 1280 px bekommt das Rad seine volle Breite (520 px): erst dann haben
   Name und Ergebnis im Stück Platz, ohne zu überlappen. */
@media(min-width:1280px){
  .rad{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
}

/* Kleines Rad für Karten (ElanumResonanzrad.mini): ohne Schrift, ohne Bedienung */
.rad-mini{display:block;width:100%;height:auto;aspect-ratio:1;filter:drop-shadow(3px 4px 5px #C4BDAF80) drop-shadow(-2px -2px 4px #FFFFFFB3)}
/* Das Stück, das als Nächstes wartet (opts.focus), hebt sich ab und glüht im Atemtakt */
.rad-mini__face{transform-box:view-box;transform-origin:160px 160px}
.rad-mini__face.is-focus{animation:face-glow var(--motion-breath) ease-in-out infinite}
@keyframes face-glow{0%,100%{filter:drop-shadow(0 0 0 transparent)}43%{filter:drop-shadow(0 0 7px #D85BA9AA)}}
body[data-motion=off] .rad-mini__face{animation-play-state:paused}