/* Corner index (quick.mjs). One glass button in the corner; destinations rise out of it, each in its colour.
   Colours are the plate colours the manual already uses; pink stays the only action colour. */
.qi{--ease-out:cubic-bezier(.22,1,.36,1);position:fixed;right:24px;bottom:24px;z-index:60;width:60px;height:60px}
.qi [data-color=rose],.qi[data-section=rose] .qi-button,.qi[data-tint=rose] .qi-glow{--p1:#FFC08F;--p2:#FF3E9A;--tc:#FF8CC0;--glow:rgba(255,62,154,.30)}
.qi [data-color=lagoon],.qi[data-section=lagoon] .qi-button,.qi[data-tint=lagoon] .qi-glow{--p1:#8EF1EA;--p2:#13B5A6;--tc:#6FE8DD;--glow:rgba(19,181,166,.32)}
.qi [data-color=violet],.qi[data-section=violet] .qi-button,.qi[data-tint=violet] .qi-glow{--p1:#E7A4EB;--p2:#8B3BB8;--tc:#DDA2EA;--glow:rgba(139,59,184,.38)}
.qi [data-color=gold],.qi[data-section=gold] .qi-button,.qi[data-tint=gold] .qi-glow{--p1:#FFE7A6;--p2:#FF8A3D;--tc:#FFD27A;--glow:rgba(255,138,61,.30)}
.qi [data-color=ink],.qi[data-section=ink] .qi-button,.qi[data-tint=ink] .qi-glow{--p1:#FFF6EC;--p2:#C9BCD6;--tc:#FFF6EC;--glow:rgba(255,246,236,.10)}

/* Glow from the corner and a dark veil behind the list so it reads over any section. */
.qi-glow,.qi-scrim{position:fixed;pointer-events:none;opacity:0;transition:opacity 420ms var(--ease-out),background 420ms var(--ease-out)}
.qi-glow{inset:0;background:radial-gradient(75vmax 65vmax at 100% 100%,var(--glow),transparent 62%)}
.qi-scrim{right:0;bottom:0;width:min(560px,100%);height:100%;background:linear-gradient(270deg,rgba(11,7,16,.86),rgba(11,7,16,.55) 55%,rgba(11,7,16,0))}
.qi[data-open=true] .qi-glow,.qi[data-open=true] .qi-scrim{opacity:1}

/* The button */
.qi-button{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(29,21,41,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 0 0 1px rgba(255,246,236,.22),0 0 0 5px color-mix(in srgb,var(--p2) 22%,transparent),0 16px 40px -12px rgba(0,0,0,.8);color:var(--tc);cursor:pointer;transition:opacity 360ms var(--ease-out),transform 520ms var(--ease-out),box-shadow 300ms var(--ease-out),color 300ms var(--ease-out)}
.qi-button svg{width:24px;height:24px}
.qi-icon,.qi-close{grid-area:1/1;display:grid;place-items:center;transition:opacity 220ms var(--ease-out),transform 420ms var(--ease-out)}
.qi-close{opacity:0;transform:rotate(-90deg) scale(.6);color:var(--paper-100)}
.qi[data-open=true] .qi-icon{opacity:0;transform:rotate(90deg) scale(.6)}
.qi[data-open=true] .qi-close{opacity:1;transform:none}
.qi[data-open=true] .qi-button{box-shadow:inset 0 0 0 1px rgba(255,246,236,.32),0 0 0 6px rgba(255,46,136,.2),0 16px 40px -12px rgba(0,0,0,.8)}
.qi-button:active{transform:scale(.94)}
.qi-button:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.qi:not(.is-shown) .qi-button{opacity:0;transform:translateY(24px) scale(.7);pointer-events:none}
@media (hover:hover){.qi-button:hover{box-shadow:inset 0 0 0 1px rgba(255,246,236,.4),0 0 0 7px color-mix(in srgb,var(--p2) 30%,transparent),0 16px 40px -12px rgba(0,0,0,.8)}}

/* The lists rise out of the corner; nearest item first. */
.qi-menu{position:absolute;right:0;bottom:72px}
.qi-list{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0;padding:0 0 4px;list-style:none;pointer-events:none}
.qi-list>li{display:flex;justify-content:flex-end;opacity:0;transform:translate(10px,calc(var(--n)*20px + 36px)) scale(.6);transform-origin:right bottom;filter:blur(6px);transition:opacity 200ms ease,transform 260ms cubic-bezier(.4,0,1,1),filter 200ms ease;transition-delay:calc((6 - var(--n))*12ms)}
.qi[data-open=true][data-level=main] .qi-list[data-level=main]>li,
.qi[data-open=true][data-level=systems] .qi-list[data-level=systems]>li{opacity:1;transform:none;filter:none;transition:opacity 340ms ease,transform 560ms var(--ease-out),filter 420ms ease;transition-delay:calc(var(--n)*28ms)}
.qi[data-open=true][data-level=main] .qi-list[data-level=main],
.qi[data-open=true][data-level=systems] .qi-list[data-level=systems]{pointer-events:auto}

.qi-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:5px 6px 5px 16px;border:0;border-radius:16px;background:none;color:var(--tc);font:600 21px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.65);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}
.qi-label{padding-top:2px}
.qi-meta{font:500 13px/1 var(--font-body);letter-spacing:0;text-transform:none;color:rgba(255,246,236,.62);text-shadow:none}
.qi-tag{padding:4px 6px 3px;border-radius:6px;background:rgba(255,46,136,.18);color:#FF8CC0;font:600 11px/1 var(--font-ui);letter-spacing:.14em;text-shadow:none}
.qi-plate{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:linear-gradient(160deg,var(--p1),var(--p2));box-shadow:0 6px 18px -6px var(--p2);color:#1A0F22;transition:transform 300ms var(--ease-out)}
.qi-plate svg{width:20px;height:20px;stroke-width:2}
.qi-chev{width:12px;font:600 18px/1 var(--font-body);color:rgba(255,246,236,.85);opacity:0;transform:translateX(-4px);transition:opacity 200ms,transform 300ms var(--ease-out)}
.qi-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.qi-item:hover,.qi-item:focus-visible{background:rgba(255,246,236,.08);box-shadow:inset 0 0 0 1px rgba(255,246,236,.14)}
.qi-item:hover .qi-chev,.qi-item:focus-visible .qi-chev{opacity:1;transform:none}
.qi-item:hover .qi-plate,.qi-item:focus-visible .qi-plate{transform:scale(1.06)}
.qi-item:active .qi-plate{transform:scale(.94)}
.qi-back{font-size:17px;color:rgba(255,246,236,.75)}
.qi-back .qi-plate{width:34px;height:34px;background:rgba(255,246,236,.12);box-shadow:none;color:var(--paper-100)}

/* Daylight */
[data-theme=light] .qi [data-color=rose]{--tc:#C2185B}
[data-theme=light] .qi [data-color=lagoon]{--tc:#0B766D}
[data-theme=light] .qi [data-color=violet]{--tc:#7A2E9E}
[data-theme=light] .qi [data-color=gold]{--tc:#A04E00}
[data-theme=light] .qi [data-color=ink]{--tc:#1D1529}
[data-theme=light] .qi-scrim{background:linear-gradient(270deg,rgba(255,246,236,.95),rgba(255,246,236,.7) 55%,rgba(255,246,236,0))}
[data-theme=light] .qi-item{text-shadow:none}
[data-theme=light] .qi-meta{color:var(--text-3)}
[data-theme=light] .qi-chev{color:var(--text-2)}
[data-theme=light] .qi-item:hover,[data-theme=light] .qi-item:focus-visible{background:rgba(29,21,41,.06);box-shadow:inset 0 0 0 1px rgba(29,21,41,.1)}
[data-theme=light] .qi-back{color:var(--text-2)}
[data-theme=light] .qi-back .qi-plate{background:rgba(29,21,41,.08);color:var(--text)}
[data-theme=light] .qi-button{background:rgba(255,250,244,.82);box-shadow:inset 0 0 0 1px rgba(29,21,41,.12),0 0 0 5px color-mix(in srgb,var(--p2) 22%,transparent),0 16px 36px -14px rgba(107,47,160,.45)}
[data-theme=light] .qi[data-section=rose] .qi-button{color:#C2185B}
[data-theme=light] .qi[data-section=lagoon] .qi-button{color:#0B766D}
[data-theme=light] .qi[data-section=violet] .qi-button{color:#7A2E9E}
[data-theme=light] .qi[data-section=gold] .qi-button{color:#A04E00}
[data-theme=light] .qi[data-section=ink] .qi-button{color:#1D1529}
[data-theme=light] .qi-close{color:var(--text)}

/* Phones: thumb zone; the veil covers the whole width. */
@media (max-width:600px){
 .qi{right:16px;bottom:16px;width:56px;height:56px}
 .qi-menu{bottom:68px}
 .qi-scrim{width:100%;background:linear-gradient(270deg,rgba(11,7,16,.95),rgba(11,7,16,.86) 60%,rgba(11,7,16,.7))}
 [data-theme=light] .qi-scrim{background:linear-gradient(270deg,rgba(255,246,236,.97),rgba(255,246,236,.9) 60%,rgba(255,246,236,.78))}
 .qi-item{min-height:48px;font-size:19px}
 .qi-meta{display:none}
}
@media (max-height:700px){.qi-item{min-height:44px;font-size:18px}.qi-plate{width:34px;height:34px}}
@media (prefers-reduced-motion:reduce){
 .qi-list>li,.qi[data-open] .qi-list>li{transform:none!important;filter:none!important;transition:opacity 150ms ease!important;transition-delay:0s!important}
 .qi-button,.qi-icon,.qi-close{transition:opacity 150ms ease}
}
[data-theme=light] .qi-tag{background:rgba(212,16,106,.1);color:#B80D5B}
.qi-scrim{background:linear-gradient(270deg,rgba(11,7,16,.9),rgba(11,7,16,.66) 55%,rgba(11,7,16,0))}
@media (max-width:600px){.qi-scrim{background:linear-gradient(270deg,rgba(11,7,16,.95),rgba(11,7,16,.86) 60%,rgba(11,7,16,.7))}}