/* Header jump menu: Florence's orb in the centre of the header; the menu pours out of it. */
/* The pour circle's radius (animated by src/pour.js for both the orb menu and the bell). */
@property --pour-r{syntax:'<length>';inherits:false;initial-value:4000px}
.app-header.has-jump{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:84px;flex-wrap:nowrap}
.has-jump .brand{justify-self:start;grid-column:1;grid-row:1}
.has-jump .header-actions{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
.has-jump .jump-centre{grid-column:2;grid-row:1}
.jump-open .app-chrome{z-index:45;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.has-jump .brand,.has-jump .header-actions{transition:opacity .25s}
.jump-open .has-jump .brand,.jump-open .has-jump .header-actions{opacity:.25;pointer-events:none}

.jump-centre{--jump-orb:56px;position:relative;display:grid;place-items:center;width:var(--jump-orb);height:var(--jump-orb)}
.orb-menu{position:relative;z-index:3;display:block;width:var(--jump-orb);height:var(--jump-orb);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:scale .4s cubic-bezier(.2,.8,.2,1)}
.orb-menu .hero-orb{position:relative;width:100%;height:100%;margin:0;animation:none;pointer-events:none}
.orb-menu:hover,.orb-menu:focus-visible{scale:1.06}
.orb-menu.is-open{scale:1.12}
.orb-menu.absorb{animation:jump-absorb .32s cubic-bezier(.2,.8,.2,1)}
.orb-menu:focus-visible{outline:2px solid #79546b;outline-offset:6px}
@keyframes jump-absorb{40%{scale:1.2}100%{scale:1}}
/* A soft halo in the orb palette so Florence reads at header size; brighter when engaged. */
.orb-menu:before{content:'';position:absolute;inset:-9px;z-index:-1;border-radius:50%;pointer-events:none;opacity:.32;filter:blur(11px);
 background:conic-gradient(from 0deg,#ff7c7c,#ffd166 58deg,#80ed99 128deg,#72efdd 185deg,#a882dd 280deg,#e07be0 322deg,#ff7c7c);
 animation:jump-halo 12s linear infinite;transition:opacity .35s,scale .5s cubic-bezier(.2,.8,.2,1)}
.orb-menu:hover:before,.orb-menu:focus-visible:before{opacity:.55}
.orb-menu.is-open:before{opacity:.8;scale:1.25}
@keyframes jump-halo{to{rotate:360deg}}
.motion-paused .orb-menu:before,.tab-hidden .orb-menu:before{animation-play-state:paused}

.jump-caption{position:absolute;left:50%;top:calc(100% + 10px);z-index:4;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border:1px solid var(--ds-panel-border,#e4e4e4);border-radius:999px;background:#fff;box-shadow:var(--ds-panel-shadow);font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;translate:-50% -4px;transition:opacity .25s,translate .25s}
.jump-caption-project{color:var(--muted)}
.jump-caption-page{font-weight:550;color:#481729}
.jump-centre:hover .jump-caption,.jump-centre:has(.orb-menu:focus-visible) .jump-caption,.jump-caption.show{opacity:1;translate:-50% 0}
.jump-open .jump-caption{opacity:0!important}
.jump-centre kbd,.jump-panel kbd{display:inline-flex;align-items:center;gap:2px;padding:1px 7px;border:1px solid var(--ds-panel-border,#e4e4e4);border-bottom-width:2px;border-radius:7px;background:#f7f7f7;font:500 11px 'DM Sans',sans-serif;color:var(--muted);white-space:nowrap}

.jump-backdrop{position:fixed;inset:0;z-index:40;background:#ffffffa6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .18s}
.jump-backdrop.show{opacity:1}

.jump-panel{position:absolute;z-index:2;left:50%;top:calc(var(--jump-orb) / 2);width:min(880px,calc(100vw - 32px));translate:-50% 0;padding-top:calc(var(--jump-orb) / 2 + 6px);overflow:hidden;background:#fff;border:1px solid var(--ds-panel-border,#e4e4e4);border-radius:26px;box-shadow:0 24px 70px #2424241f,0 4px 14px #2424240f;text-align:left;--pour-x:50%;--pour-y:0px;--pour-start:calc(var(--jump-orb) / 2);--pour-end:1200px}
.jump-panel[hidden]{display:none}
.jump-panel:before{content:'';position:absolute;left:50%;top:-140px;width:420px;height:280px;translate:-50% 0;border-radius:50%;pointer-events:none;opacity:.22;filter:blur(40px);
 background:conic-gradient(from 180deg,rgba(114,239,221,.8),rgba(168,130,221,.8) 95deg,rgba(255,124,124,.75) 185deg,rgba(255,209,102,.7) 255deg,rgba(128,237,153,.75) 315deg,rgba(114,239,221,.8))}
.jump-panel.opening:before{animation:jump-wash .53s ease-out both}
/* The circle itself is animated from src/pour.js, driven by how much of the panel is visible. */
@keyframes jump-wash{from{opacity:.95;scale:.6}to{opacity:.22;scale:1}}
/* Each item fades in as the circle's edge reaches it (timed in src/pour.js), so the menu flows out as one wave. */
.jump-panel.opening .jump-reveal{animation:jump-rise var(--pour-length,300ms) var(--pour-delay,0ms) cubic-bezier(.25,.6,.3,1) both}
@keyframes jump-rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.jump-search{position:relative;display:flex;align-items:center;gap:12px;height:58px;padding:0 18px 0 22px;border-bottom:1px solid #efefef;color:var(--muted)}
.jump-search>svg{width:18px;height:18px}
.jump-search input{flex:1;min-width:0;height:auto;padding:0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;outline:none;font-size:15px;color:var(--ink)}
.jump-search input::placeholder{color:#9a9097}
/* The caret shows where typing goes; the app's field outline would box in the search. */
.jump-search input:focus,.jump-search input:focus-visible{outline:none}
.jump-close{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--muted)}
.jump-close svg{width:18px;height:18px}
.jump-close:hover{background:#f7f7f7}
.jump-results{position:relative;max-height:min(540px,calc(100dvh - 190px));overflow:auto;padding:16px}
.jump-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.1fr);gap:14px}
.jump-group{min-width:0}
.jump-group h2{margin:4px 10px 8px;font:600 10px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.jump-list .jump-group+.jump-group{margin-top:10px}
.jump-option{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:14px;background:none;text-align:left;font-size:13px;color:var(--ink);cursor:pointer;transition:background .15s}
.jump-icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid #eeeeee;border-radius:10px;background:#f7f7f7;color:var(--ink)}
.jump-icon svg{width:17px;height:17px}
.jump-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump-meta{font-size:11px;color:var(--muted);white-space:nowrap}
.jump-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ededed;font-size:11px}
.jump-option[aria-selected=true]{background:#f7f7f7}
.jump-option[aria-selected=true] .jump-icon{background:#fff;border-color:var(--ds-panel-border,#e4e4e4)}
.jump-option.current .jump-label{font-weight:550;color:#481729}
.jump-option.current .jump-icon{color:#79546b}
.jump-here{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#79546b}
.jump-empty{padding:28px 12px;margin:0;text-align:center;font-size:13px;color:var(--muted)}
.jump-footer{position:relative;display:flex;flex-wrap:wrap;gap:6px 18px;padding:11px 22px;border-top:1px solid #efefef;font-size:11px;color:var(--muted)}
.jump-footer span{display:inline-flex;align-items:center;gap:6px}

@media(max-width:1000px){.app-header.has-jump{padding-left:24px;padding-right:24px}.jump-columns .jump-meta{display:none}}
@media(max-width:820px){.jump-columns{grid-template-columns:1fr 1fr}.jump-columns .jump-group:first-child{grid-row:span 2}}
@media(max-width:800px){.app-header.has-jump{min-height:74px;padding:0 20px;gap:12px}}
@media(max-width:640px){
 .jump-centre{--jump-orb:48px}
 .app-header.has-jump{min-height:68px;padding:0 16px;gap:10px}
 .has-jump .brand .brand-name{display:none}
 .has-jump .header-create span{display:none}
 .jump-caption{display:none}
 .jump-panel{width:calc(100vw - 20px);border-radius:22px}
 .jump-columns{grid-template-columns:1fr}.jump-columns .jump-group:first-child{grid-row:auto}
 .jump-results{max-height:calc(100dvh - 150px)}
 .jump-footer{display:none}
}
/* Number shortcuts mean nothing on touch screens. */
@media(max-width:640px),(pointer:coarse){.jump-option kbd{display:none}}
@media(prefers-reduced-motion:reduce){
 .jump-panel.opening,.jump-panel.closing,.jump-panel.opening .jump-reveal{animation:jump-fade .15s both}
 .jump-panel.closing{animation-direction:reverse}
 @keyframes jump-fade{from{opacity:0}to{opacity:1}}
 .jump-panel.opening:before,.orb-menu.absorb,.orb-menu:before{animation:none}
 .jump-backdrop,.jump-caption,.orb-menu,.has-jump .brand,.has-jump .header-actions{transition:none}
}
@media print{.jump-backdrop,.jump-panel{display:none}}
