/* Signs workspace (Znamenja / Signs, Slovenian and English): what is particular to this pillar.
   The general grid is in workspace.css. The emotion calculator (#kalkulator) is a separate matter and uses the older classes. */
.signal-text{min-height:70px}
.reading-panel .step-sub{margin:.1rem 0 .3rem}
.reading-panel .char-count{margin:.1rem 0 .4rem;color:var(--muted)}
.signal-chips{margin:.3rem 0 .3rem}
.signal-chips .chip{min-height:34px}
.signal-type{margin:.35rem 0 .2rem;border:1px solid rgba(124,108,255,.2);background:rgba(124,108,255,.05);padding:.4rem .9rem}
.signal-type summary{cursor:pointer;font-size:.88rem;color:var(--muted);list-style:none}
.signal-type summary::-webkit-details-marker{display:none}
.signal-type summary::after{content:" ▾";color:var(--muted)}
.signal-type[open] summary::after{content:" ▴"}
.signal-type strong{color:var(--text);font-weight:400}
.signal-type .chips{margin:.7rem 0 .2rem}
.signal-notice{min-height:.9rem;margin:0 0 .1rem;font-size:.9rem;color:var(--text)}
.reading-panel .form-actions{margin-top:.3rem}
.reading-workspace>.reading-result{position:static}
.signal-card{width:min(280px,100%,calc((100vh - 22rem)/1.6));aspect-ratio:5/8;margin:0 auto;perspective:1200px}
.signal-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1)}
.signal-card.lit .signal-card-inner{transform:rotateY(180deg)}
.signal-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;border:1px solid rgba(124,108,255,.34);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.signal-face::before{content:"";position:absolute;inset:8px;border:1px solid rgba(124,108,255,.18);pointer-events:none}
.signal-back{background-image:url("/cards/optimized/oracle-card-back-velvet-secret.webp");background-size:cover;background-position:center;background-color:#111018}
.signal-rings,.signal-front-rings{position:relative;display:block;width:52%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(190,180,255,.95) 0 3%,transparent 4%),repeating-radial-gradient(circle,transparent 0 9%,rgba(150,138,255,.5) 9.6% 10.6%,transparent 11.2% 20%);filter:drop-shadow(0 0 14px rgba(124,108,255,.5))}
.signal-front{transform:rotateY(180deg);background:linear-gradient(170deg,#2a2452,#120f2a 76%);gap:.8rem;padding:1.2rem 1.1rem;border-color:rgba(160,148,255,.85);box-shadow:0 0 0 1px rgba(124,108,255,.55),0 0 34px rgba(124,108,255,.45),0 0 88px rgba(124,108,255,.25),0 22px 56px rgba(0,0,0,.55)}
.signal-front-rings{width:34%}
.signal-card-name{position:relative;font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.2;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.signal-card-line{position:relative;font-size:.85rem;color:rgba(224,220,250,.82)}
.symbol-caption{margin:1rem auto 0;max-width:280px;text-align:center;font-size:.82rem;line-height:1.5;color:var(--muted);font-family:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
@media(prefers-reduced-motion:reduce){.signal-card-inner{transition:none}}
@media(max-width:959px){
  .reading-stage{display:none}
  .reading-result.show{min-height:min(75vh,560px)}
}
.reading-result{scroll-margin-top:6rem}
.signal-chip:focus-visible,.signal-type summary:focus-visible,#signalSubmitBtn:focus-visible{outline:2px solid #a89cff;outline-offset:3px}
@media(pointer:coarse){.signal-chips .chip{min-height:44px}.signal-type summary{min-height:44px;display:flex;align-items:center}}
/* The pressed or hovered primary button: white on #7c6cff had a contrast of 3.85, this is 5.4 */
.reading-panel .btn.primary:hover,.reading-result .btn.primary:hover{background:#6252e6;border-color:#6252e6;color:#fff}

/* The back of the card is the same picture as on the Cards: one back in the whole house. */
.signal-back .signal-rings{display:none}

/* Signs: the same loading box and ball as the other pillars, in this pillar's violet. */
body .reading-loading{
  --load-line:rgba(124,108,255,.3);
  --load-bg:radial-gradient(circle at 50% 34%,rgba(124,108,255,.11),transparent 62%),#120f24;
  --ball-core:rgba(238,232,255,.8);
  --ball-warm:rgba(150,138,255,.36);
  --ball-mid:rgba(124,108,255,.34);
  --ball-deep:rgba(58,46,110,.52);
  --ball-dark:rgba(12,9,26,.94);
  --ball-ring:rgba(150,138,255,.44);
  --ball-glow:rgba(124,108,255,.28);
  --ball-glow2:rgba(150,138,255,.2);
}