/* Predictive Read + Keep label fan. This sits above the existing swipe deck. */
.deltos-fan-layer{position:fixed;inset:0;z-index:9998;pointer-events:none}
.deltos-fan-stage{position:absolute;width:1px;height:1px;pointer-events:none;--deltos-fan-near-x:-27px;--deltos-fan-far-x:-102px;--deltos-fan-add-x:0px;--deltos-fan-near-y:100px;--deltos-fan-far-y:176px}
.deltos-fan-choice{position:absolute;width:64.5px;height:64.5px;transform:translate(-50%,-50%) scale(.96);border-radius:50%;padding:6px;border:1px solid rgba(255,255,255,.62);background:color-mix(in srgb,var(--paper,#fff) 86%,#c8dff5);box-shadow:0 12px 33px #142f4f36,inset 0 1px 1px #ffffffa3;color:var(--ink,#263240);font-size:10.5px;font-weight:740;line-height:1.15;letter-spacing:-.15px;text-align:center;overflow-wrap:anywhere;word-break:normal;display:grid;place-items:center;cursor:pointer;pointer-events:auto;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .22s cubic-bezier(.17,.82,.18,1.18),background .20s ease,border-color .20s ease,box-shadow .22s ease;animation:deltos-fan-pop .27s cubic-bezier(.18,.84,.2,1) both;will-change:transform,opacity}
/* Captured touch pointers do not activate :hover. JS mirrors the exact nearest
   bubble into these classes so finger, mouse and stylus all receive feedback. */
.deltos-fan-choice.deltos-fan-near{transform:translate(-50%,-50%) scale(1.045);border-color:#87b6fc;background:color-mix(in srgb,var(--paper,#fff) 75%,#91c5ff);box-shadow:0 13px 31px #2f78d347;z-index:4}
.deltos-fan-choice:hover,.deltos-fan-choice:focus-visible,.deltos-fan-choice.deltos-fan-hot{
 transform:translate(-50%,-50%) scale(1.18);
 outline:2px solid #408cff;outline-offset:3px;
 border-color:#d2eaff;background:color-mix(in srgb,var(--paper,#fff) 53%,#8bb8fb);
 box-shadow:0 0 0 7px #569af525,0 18px 42px #2a66b86b,inset 0 1px 3px #fff9;z-index:10
}
.deltos-fan-choice.deltos-fan-hot::after{
 content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid #4c9afe99;
 pointer-events:none;animation:deltos-fan-ring .65s ease-out infinite alternate
}
.deltos-fan-choice.deltos-fan-hot::before{
 content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid #ffffffb8;
 pointer-events:none
}
@keyframes deltos-fan-ring{
 from{opacity:.36;transform:scale(.95)}to{opacity:.86;transform:scale(1.085)}
}
.deltos-fan-choice:disabled{cursor:progress;opacity:.65}

/* All five centers follow one circular arc of radius about 200px.
   + is the exact rightmost center; 1/2 lie at +/-100px and 3/4 at +/-176px,
   forming a smooth, mirrored arc without flattening into a vertical column. */
.deltos-fan-choice[data-deltos-rank="1"]{left:var(--deltos-fan-near-x);top:calc(0px - var(--deltos-fan-near-y));animation-delay:20ms}
.deltos-fan-choice[data-deltos-rank="2"]{left:var(--deltos-fan-near-x);top:var(--deltos-fan-near-y);animation-delay:45ms}
.deltos-fan-choice[data-deltos-rank="3"]{left:var(--deltos-fan-far-x);top:calc(0px - var(--deltos-fan-far-y));animation-delay:65ms}
.deltos-fan-choice[data-deltos-rank="4"]{left:var(--deltos-fan-far-x);top:var(--deltos-fan-far-y);animation-delay:85ms}
.deltos-fan-choice.deltos-fan-add{left:0;top:0;width:58.5px;height:58.5px;padding:0;font-size:29.25px;line-height:1;color:#fff;background:linear-gradient(145deg,#6eaeff,#3876d8);border-color:#b9d8ff;animation-delay:0ms}
.deltos-fan-caption{position:absolute;left:-55px;top:-16px;transform:translate(-100%,-50%);font-size:11px;color:var(--muted,#667);padding:6px 10px;border-radius:99px;background:var(--paper,#fff);border:1px solid var(--line,#dde2e6);max-width:190px;white-space:nowrap}
.deltos-fan-close{position:absolute;left:calc(var(--deltos-fan-add-x) + 2px);top:47px;width:28px;height:28px;border:1px solid var(--line,#ddd);border-radius:50%;background:var(--paper,#fff);color:var(--ink,#222);pointer-events:auto;cursor:pointer}
.deltos-fan-creating{position:fixed;inset:0;pointer-events:auto;background:#10243b60;display:grid;place-items:center;z-index:10002;padding:22px}
.deltos-fan-form{width:min(360px,100%);background:var(--paper,#fff);color:var(--ink,#222);border:1px solid var(--line,#ddd);border-radius:22px;padding:20px;box-shadow:0 28px 90px #0005;display:grid;gap:13px}
.deltos-fan-form label{font-weight:750;font-size:14px}
.deltos-fan-form input{width:100%;box-sizing:border-box;border-radius:12px;border:1px solid var(--line,#ddd);padding:13px 14px;font-size:15px;background:var(--paper,#fff);color:var(--ink,#222)}
.deltos-fan-form-actions{display:flex;gap:10px;justify-content:flex-end}
.deltos-fan-form-actions button{padding:10px 17px;border-radius:11px;border:1px solid var(--line,#ddd);background:var(--soft,#f3f5f8);color:var(--ink,#222);cursor:pointer}
.deltos-fan-form-actions button[type=submit]{background:#4485e8;color:#fff}
.deltos-fan-error{font-size:12px;color:#cb3f50;max-width:260px}
/* Fade in without changing bubble hitboxes or their mathematically centered positions. */
@keyframes deltos-fan-pop{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
/* A floating, shrinking card reveals the five selection targets on phones
   and taller portrait screens, without shrinking normal (non-dragged) mail. */
.deltos-portrait-pulling{transform-origin:center center!important;contain:paint;will-change:transform}
.deltos-four-way:not(.deltos-portrait-pulling){transition:transform .22s cubic-bezier(.16,.86,.26,1),box-shadow .22s ease}
.deck-top:not(.deltos-portrait-pulling){transition:transform .24s cubic-bezier(.16,.86,.26,1),opacity .24s ease}
@media (orientation:portrait){
 .deltos-fan-layer{z-index:2147483000}
 .deltos-fan-choice{box-shadow:0 14px 35px #142f4f55,inset 0 1px 1px #ffffffa3}
 .deltos-fan-stage{transform:translateZ(0)}
}
/* Compact vertical and horizontal radii keep every bubble reachable on shorter screens. */
@media(max-height:650px){
 .deltos-fan-stage{--deltos-fan-near-x:-21px;--deltos-fan-far-x:-90px;--deltos-fan-add-x:0px;--deltos-fan-near-y:75px;--deltos-fan-far-y:132px}
 .deltos-fan-choice{width:54px;height:54px;font-size:10px}
}
@media(max-width:600px){
 .deltos-fan-stage{--deltos-fan-near-x:-20px;--deltos-fan-far-x:-79px;--deltos-fan-add-x:0px;--deltos-fan-near-y:78px;--deltos-fan-far-y:135px}
 .deltos-fan-choice{width:51.75px;height:51.75px;font-size:9.5px}
 .deltos-fan-choice.deltos-fan-add{width:50.25px;height:50.25px;font-size:28px}
 .deltos-fan-close{top:42px}
 .deltos-fan-caption{display:none}
}
@media(max-width:600px) and (max-height:650px){
 .deltos-fan-stage{--deltos-fan-near-x:-18px;--deltos-fan-far-x:-69px;--deltos-fan-near-y:60px;--deltos-fan-far-y:102px}
 .deltos-fan-choice{width:48px;height:48px}
 .deltos-fan-choice.deltos-fan-add{width:48px;height:48px;font-size:27px}
 .deltos-fan-close{top:41px}
}
@media(prefers-reduced-motion:reduce){
 .deltos-fan-choice,.deltos-fan-choice.deltos-fan-hot::after{animation:none;transition:none}
 .deltos-portrait-pulling,.deltos-four-way,.deck-top{transition:none!important}
}