/* dialahelper.css — DialAHelper (owner 2026-11-02, DialAHelper; dialahelper.js): a square stage with a broad engraved ring, the lock at
   the top (a slot with three chevrons that light up when an entry locks in), entries as round glass plates, and the knob in the centre
   with the logo and the slot's text. Calm, premium type: one weight, the code line with wide tracking. Light and dark follow the
   page's tokens. Reduced motion: no transitions on the lock light, nothing pulses.
   0.2.0 (owner 2026-11-02): the line under the dial with „Zurück“ and the sound switch; the dial takes the size the page gives.
   version: 0.2.0 · created 2026-11-02 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
.ed{--ed-line:rgba(16,42,67,.22); --ed-track:rgba(16,42,67,.045); --ed-plate:rgba(255,255,255,.78); --ed-plate-edge:rgba(16,42,67,.14);
  --ed-knob:rgba(255,255,255,.82); --ed-shadow:16,42,67; --ed-lit:#fb683e;
  position:relative; width:min(100%, 1100px); aspect-ratio:1; margin:0 auto; flex:none; touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent; cursor:grab}
.ed:active{cursor:grabbing}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ed{--ed-line:rgba(234,244,248,.2); --ed-track:rgba(234,244,248,.04);
  --ed-plate:rgba(22,47,74,.72); --ed-plate-edge:rgba(234,244,248,.14); --ed-knob:rgba(16,36,58,.86); --ed-shadow:0,0,0}}
:root[data-theme="dark"] .ed{--ed-line:rgba(234,244,248,.2); --ed-track:rgba(234,244,248,.04);
  --ed-plate:rgba(22,47,74,.72); --ed-plate-edge:rgba(234,244,248,.14); --ed-knob:rgba(16,36,58,.86); --ed-shadow:0,0,0}

.ed-gate{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.ed-track{fill:none; stroke:var(--ed-track)}
.ed-edge{fill:none; stroke:var(--ed-line); stroke-width:1}
.ed-ticks path{fill:none; stroke:var(--ed-line); stroke-width:1.2}
.ed-slot-ring{fill:none; stroke:var(--ed-line); stroke-width:1.5; transition:stroke .35s ease, filter .35s ease}
.ed-chev{fill:var(--ed-line); transition:fill .35s ease, filter .35s ease}
.ed--locked .ed-chev{fill:var(--ed-lit); filter:drop-shadow(0 0 5px rgba(251,104,62,.75))}
.ed--locked .ed-slot-ring{stroke:var(--ed-lit); filter:drop-shadow(0 0 6px rgba(251,104,62,.55))}

.ed-items{position:absolute; inset:0}
.ed-item{position:absolute; left:50%; top:50%; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding:0;
  appearance:none; border:0; background:none; color:var(--text); font:inherit; cursor:pointer; will-change:transform; touch-action:none}
.ed-face{position:absolute; inset:0; border-radius:50%; overflow:hidden; background:var(--ed-plate);
  box-shadow:inset 0 0 0 1px var(--ed-plate-edge), 0 6px 16px -6px rgba(var(--ed-shadow), .35); transition:box-shadow .3s ease}
.ed-item--col .ed-face{background:radial-gradient(120% 100% at 30% 10%, var(--c1), var(--c2) 55%, var(--c3))}
.ed-face canvas{position:absolute; inset:4%; width:92%; height:92%}
.ed-lab{position:absolute; left:50%; top:calc(100% + 3px); width:var(--lw); transform:translateX(-50%); text-align:center; pointer-events:none;
  font-size:clamp(.74rem, calc(var(--s) * .14), 1.1rem); line-height:1.15; letter-spacing:.02em; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ed--compact .ed-lab{font-size:.66rem; letter-spacing:.06em; white-space:nowrap; text-overflow:ellipsis; display:block}
.ed-item.is-slot .ed-face{box-shadow:inset 0 0 0 2px var(--ed-lit), 0 8px 22px -6px rgba(251,104,62,.45)}
.ed-item.is-slot .ed-lab{opacity:0}
.ed-item:focus-visible{outline:none}
.ed-item:focus-visible .ed-face{box-shadow:inset 0 0 0 3px var(--focus)}

/* the knob: logo on top, the slot's name, code and text below; a tap confirms */
.ed-knob{position:absolute; left:50%; top:50%; width:var(--kd); height:var(--kd); margin:calc(var(--kd) / -2) 0 0 calc(var(--kd) / -2);
  border-radius:50%; border:0; padding:calc(var(--kd) * .09) calc(var(--kd) * .12) 0; cursor:pointer; color:var(--text); font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:calc(var(--kd) * .025); background:var(--ed-knob);
  box-shadow:inset 0 0 0 1px var(--ed-plate-edge), inset 0 -10px 26px -18px rgba(var(--ed-shadow), .35), 0 18px 40px -18px rgba(var(--ed-shadow), .45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:box-shadow .3s ease, transform .3s ease; touch-action:manipulation}
.ed-knob:hover{box-shadow:inset 0 0 0 1.5px var(--ed-lit), 0 18px 40px -18px rgba(var(--ed-shadow), .5)}
.ed-knob:focus-visible{outline:3px solid var(--focus); outline-offset:4px}
.ed--go .ed-knob{animation:ed-go .45s ease}
@keyframes ed-go{40%{transform:scale(.965)}}
.ed-logo{display:block; flex:none}
.ed-info{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; min-height:0; overflow:hidden; width:100%; flex:1}
.ed-name{font-weight:400; font-size:clamp(.92rem, calc(var(--kd) * .072), 2.1rem); line-height:1.18; text-wrap:balance}
.ed-code{font-size:clamp(.62rem, calc(var(--kd) * .04), 1.05rem); letter-spacing:.28em; text-transform:uppercase; color:var(--accent-text)}
.ed-code:empty{display:none}
.ed-text{font-size:clamp(.74rem, calc(var(--kd) * .05), 1.3rem); line-height:1.35; color:var(--muted); text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-width:92%; flex:none}
.ed-hint{flex:none; font-style:normal; font-size:clamp(.6rem, calc(var(--kd) * .036), 1rem); letter-spacing:.24em; text-transform:uppercase; color:var(--ed-lit); margin-top:auto; margin-bottom:calc(var(--kd) * .09); padding:2px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px currentColor; flex:none}
.ed--compact .ed-text{-webkit-line-clamp:2; font-size:clamp(.7rem, calc(var(--kd) * .066), .86rem); line-height:1.28}
.ed--compact .ed-knob{padding-top:calc(var(--kd) * .07)}
.ed--compact .ed-hint{margin-bottom:calc(var(--kd) * .06)}
.ed--compact .ed-name{font-size:clamp(.86rem, calc(var(--kd) * .075), 1.1rem)}
.ed-live{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* while the intro lands on the knob the entries wait inside it */
.ed--hold .ed-item{opacity:0}

/* the line under the dial: „Zurück“ on the left, the sound switch on the right (thumb zone) */
.ed-tools{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; max-width:1100px; min-height:44px}
.ed-snd{margin-left:auto; appearance:none; border:0; background:none; font:inherit; font-size:.82rem; letter-spacing:.06em; color:var(--muted); cursor:pointer;
  min-height:44px; padding:0 12px; border-radius:999px; display:inline-flex; align-items:center; gap:6px}
.ed-snd svg{width:18px; height:18px}
.ed-snd[hidden]{display:none}
.ed-snd[aria-pressed="true"] .ed-snd-off, .ed-snd[aria-pressed="false"] .ed-snd-on{display:none}
.ed-snd[aria-pressed="true"]{color:var(--text)}
.ed-snd:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.ed-back{appearance:none; border:0; background:none; font:inherit; font-size:.9rem; color:var(--link); cursor:pointer; min-height:44px; padding:0 14px;
  border-radius:999px; letter-spacing:.02em}
.ed-back:hover{background:rgba(var(--ed-shadow, 16,42,67), .06)}
.ed-back:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .ed-chev, .ed-slot-ring, .ed-face, .ed-knob{transition:none}
  .ed--go .ed-knob{animation:none}
}

/* a shortened sentence: dotted underline in the knob, the full sentence under the dial on focus, hover or press-and-hold */
.ed-text.is-cut{text-decoration:underline dotted; text-decoration-color:color-mix(in srgb, currentColor 55%, transparent); text-underline-offset:3px}
.ed-more{margin:6px auto 0; max-width:34ch; min-height:2.6em; font-size:.88rem; line-height:1.35; color:var(--muted); text-align:center; visibility:hidden; opacity:0; transition:opacity .2s ease}
.ed--cut:has(.ed-knob:hover, .ed-knob:focus-visible) + .ed-more.is-cut, .ed--cut.ed--more + .ed-more.is-cut{visibility:visible; opacity:1}
.ed--tiny .ed-logo{display:none}
.ed--tiny .ed-knob{padding:calc(var(--kd) * .1) calc(var(--kd) * .08) 0; gap:1px}
.ed--tiny .ed-name{font-size:.8rem; line-height:1.12}
.ed--tiny .ed-code{font-size:.56rem; letter-spacing:.2em}
.ed--tiny .ed-text{-webkit-line-clamp:2; font-size:.68rem}
.ed--tiny .ed-hint{font-size:.56rem; letter-spacing:.16em; padding:1px 8px; margin-bottom:calc(var(--kd) * .08)}
.ed-name, .ed-text, .ed-more{-webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word}

/* 0.3.0: the knob as clear glass over the page's ∞ (the logo shows through, the words stay readable); without the drop picture */
.ed--nologo .ed-logo{display:none}
.ed--glass .ed-knob{background:color-mix(in srgb, var(--surface, #fff) 30%, transparent); -webkit-backdrop-filter:blur(1.5px) saturate(1.2); backdrop-filter:blur(1.5px) saturate(1.2);
  box-shadow:inset 0 0 0 1px var(--ed-plate-edge), inset 0 1px 0 rgb(255 255 255 / .5), 0 18px 40px -22px rgba(var(--ed-shadow), .45); justify-content:center; padding-top:calc(var(--kd) * .08)}
.ed--glass .ed-info{flex:0 1 auto}
.ed--glass .ed-name, .ed--glass .ed-code, .ed--glass .ed-text{text-shadow:0 0 6px var(--bg, #f6fafc), 0 0 2px var(--bg, #f6fafc)}
.ed--glass .ed-hint{margin-top:8px; margin-bottom:0; background:color-mix(in srgb, var(--surface, #fff) 70%, transparent)}