/* Site-wide Spotlight component. Contract: SPOTLIGHT-STANDARD.md. */
:root{--glass-surface:#ffffffed;--glass-border:#ffffffb3;--glass-shadow:0 28px 100px #0b1b4659,0 4px 18px #0b1b461a;--glass-surface-blur:24px;--glass-backdrop-color:rgba(19,35,68,.34);--glass-backdrop-blur:9px;--glass-radius:22px;--glass-ease:cubic-bezier(.22,.61,.36,1);--glass-open-duration:720ms;--glass-close-duration:420ms;--glass-resize-duration:480ms;--glass-select-duration:600ms}
.glass-dialog[data-glass]{--glass-width:620px}
.glass-dialog[data-glass-size=search]{--glass-width:720px}
.glass-dialog[data-glass-size=wide]{--glass-width:1380px}
.glass-dialog[data-glass-size=media]{--glass-width:1100px}
html{scrollbar-gutter:stable}
html.glass-open{overflow:hidden}
.glass-dialog[data-glass][open]{padding:0;border:1px solid var(--glass-border);color:var(--ink);overflow:auto;position:fixed;inset:0;margin:auto;height:fit-content;width:min(var(--glass-width),calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);border-radius:var(--glass-radius);background:var(--glass-surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--glass-surface-blur));-webkit-backdrop-filter:blur(var(--glass-surface-blur));transform-origin:center;opacity:1;transform:none;filter:none;animation:none;will-change:opacity,transform}
.glass-dialog[data-glass-size=wide][open]{overflow:hidden}
.glass-dialog[data-glass]::backdrop{background:var(--glass-backdrop-color,rgba(19,35,68,.34));backdrop-filter:blur(var(--glass-backdrop-blur,9px));-webkit-backdrop-filter:blur(var(--glass-backdrop-blur,9px));opacity:1;animation:none;will-change:opacity}
.glass-dialog[data-glass][open].is-glass-moving{animation:var(--glass-window-name) var(--glass-duration) var(--glass-ease,cubic-bezier(.22,.61,.36,1)) both;will-change:opacity,transform}
.glass-dialog[data-glass][open].is-glass-moving::backdrop{animation:var(--glass-backdrop-name) var(--glass-duration) var(--glass-ease,cubic-bezier(.22,.61,.36,1)) both}
.glass-dialog[data-glass].is-glass-resizing{overflow:hidden}
@keyframes glass-window-a{from{opacity:var(--glass-opacity-from);transform:var(--glass-transform-from)}to{opacity:var(--glass-opacity-to);transform:var(--glass-transform-to)}}
@keyframes glass-window-b{from{opacity:var(--glass-opacity-from);transform:var(--glass-transform-from)}to{opacity:var(--glass-opacity-to);transform:var(--glass-transform-to)}}
@keyframes glass-backdrop-a{from{opacity:var(--glass-backdrop-opacity-from)}to{opacity:var(--glass-backdrop-opacity-to)}}
@keyframes glass-backdrop-b{from{opacity:var(--glass-backdrop-opacity-from)}to{opacity:var(--glass-backdrop-opacity-to)}}
.spotlight-trigger,[data-article-copy],[data-article-share],[data-glass-open],[data-glass-close]{transition:background-color .32s ease,border-color .32s ease,color .32s ease,box-shadow .32s ease}
[data-article-copy]:active{box-shadow:inset 0 2px 6px #11286428}
[data-ui-press],[data-article-vote],.reader-integrator-help,.is-article-support .support-compact-cta{transition:background-color .32s ease,border-color .32s ease,color .32s ease,box-shadow .32s ease,transform .32s var(--glass-ease)}
@media(max-width:600px){.glass-dialog[data-glass][open]{border-radius:19px}}
@media(prefers-reduced-motion:reduce){.glass-dialog[data-glass][open],.glass-dialog[data-glass][open]::backdrop{animation:none}.spotlight-trigger,[data-article-copy],[data-article-share],[data-glass-open],[data-glass-close]{transition:none}}
@media(prefers-reduced-motion:reduce){[data-ui-press],[data-article-vote],.reader-integrator-help,.is-article-support .support-compact-cta{transition:none}}

.glass-dialog[data-glass] .glass-window-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:13px 20px;border-bottom:1px solid var(--line);background:#f5f7fc;color:var(--description);font-size:13px}
.glass-dialog[data-glass] .glass-window-bar button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--description);font:inherit;padding:6px 10px}
.glass-body{padding:24px 28px}
.glass-dialog[data-glass] button{cursor:pointer;transition:background-color .32s ease,border-color .32s ease,color .32s ease,box-shadow .32s ease}
.glass-dialog[data-glass] button:disabled{cursor:default}
.spotlight-footer .spotlight-step-controls{display:inline-flex;gap:2px}
.spotlight-footer button:not(.spotlight-all){min-height:32px;padding:4px 7px;border:1px solid #d6e0ee;border-radius:7px;background:#ffffff99;color:inherit;font:inherit;white-space:nowrap;box-shadow:0 1px 2px #11286406}
.spotlight-footer button:disabled{opacity:.4}
.glass-dialog[data-glass] .glass-window-bar button:not(:disabled):hover,.spotlight-footer button:not(:disabled):hover{border-color:#ffc4a3;background:#fff4e9}
.glass-dialog[data-glass] button:focus-visible{outline:2px solid var(--link,#227fa1);outline-offset:3px}
@media(max-width:600px){.spotlight-footer>span:nth-child(3){display:inline-flex}}
@media(prefers-reduced-motion:reduce){.glass-dialog[data-glass] button{transition:none}}
@media(max-width:600px){.glass-dialog[data-glass] .glass-window-bar{padding:12px 16px}.glass-body{padding:22px}}

/* Reusable panel crossfade: outgoing panels never occupy layout or receive focus. */
.glass-panel-stack{position:relative;isolation:isolate}.glass-panel-stack.is-glass-panel-sizing{overflow:hidden}
.glass-panel-stack>.glass-panel-outgoing{position:absolute;inset:0 0 auto;pointer-events:none;user-select:none}
.glass-panel-stack>.is-glass-panel-moving{will-change:opacity}
.glass-tabs{position:relative;isolation:isolate}
.glass-tabs::before{content:"";box-sizing:border-box;position:absolute;z-index:-1;left:5px;top:5px;bottom:5px;width:calc((100% - 10px - (var(--glass-tab-count,3) - 1)*4px)/var(--glass-tab-count,3));border:1px solid #d5dfef;border-radius:8px;background:#fff;box-shadow:0 2px 8px #1128640a;transform:translateX(calc(var(--glass-tab-index,0)*(100% + 4px)));transition:transform var(--glass-select-duration,600ms) var(--glass-ease)}
@media(prefers-reduced-motion:reduce){.glass-tabs::before{transition:none}}

/* One highlight follows the active result instead of multiple hover backgrounds. */
.glass-result-list{position:relative;isolation:isolate}
.glass-result-list::before{content:"";position:absolute;pointer-events:none;z-index:0;left:0;top:0;width:var(--glass-result-width,0px);height:var(--glass-result-height,0px);transform:translate(var(--glass-result-x,0px),var(--glass-result-y,0px));border:1px solid #dbe5f5;border-radius:11px;background:#eaf0fc;opacity:0;transition:opacity var(--glass-select-duration,600ms) var(--glass-ease);box-sizing:border-box}
.glass-result-list.has-glass-selection::before{opacity:1;transition:transform var(--glass-select-duration,600ms) var(--glass-ease),width var(--glass-select-duration,600ms) var(--glass-ease),height var(--glass-select-duration,600ms) var(--glass-ease),opacity var(--glass-select-duration,600ms) var(--glass-ease)}
.glass-result-list>li{position:relative;z-index:1}
.glass-dialog .glass-result-list>li:is(.is-selected,:hover){background:transparent;border-color:transparent;box-shadow:none}
@media(prefers-reduced-motion:reduce){.glass-result-list::before,.glass-result-list.has-glass-selection::before{transition:none}}

/* Readable semantic folders: subdued, wrapping safely on narrow screens. */
.spotlight-path{color:var(--muted);font-weight:500;line-height:1.55;overflow-wrap:anywhere;min-width:0}

/* Shared navigation motion. Static glass; reversible CSS transitions, no stagger. */
.header-menu .sub-menu{--menu-shift-x:0px;background:var(--glass-surface);backdrop-filter:blur(var(--glass-surface-blur));-webkit-backdrop-filter:blur(var(--glass-surface-blur));box-shadow:0 8px 30px #1128641c;transform:translate(var(--menu-shift-x),8px);transition:opacity var(--glass-close-duration) var(--glass-ease),transform var(--glass-close-duration) var(--glass-ease),visibility 0s linear var(--glass-close-duration)}
.header-menu .is-open>.sub-menu{transform:translate(var(--menu-shift-x),0);transition-duration:var(--glass-open-duration),var(--glass-open-duration),0s;transition-delay:0s}
.header-submenu-toggle svg{transition:transform var(--glass-select-duration) var(--glass-ease)}
.header-menu .sub-menu a{transition:background-color 320ms var(--glass-ease),color 320ms var(--glass-ease)}
.is-page-swapping .header-menu .sub-menu{opacity:0;visibility:hidden;transition:none}
@media(max-width:800px){.header-menu .sub-menu{--menu-shift-x:-50%}}

/* The arriving snapshot covers the retained old page: no fade through white. */
@view-transition{navigation:auto}
::view-transition{pointer-events:none}
::view-transition-group(root),::view-transition-group(site-header){animation:none}
::view-transition-image-pair(root),::view-transition-image-pair(site-header){isolation:normal}
::view-transition-old(root),::view-transition-old(site-header){animation:none;mix-blend-mode:normal}
::view-transition-new(root),::view-transition-new(site-header){animation:site-page-arrive var(--glass-select-duration) var(--glass-ease) both;mix-blend-mode:normal}
.header{position:relative;z-index:110;view-transition-name:site-header}
@keyframes site-page-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .header-menu .sub-menu,.header-menu .is-open>.sub-menu,.header-submenu-toggle svg,.header-menu .sub-menu a{transition:none}
  ::view-transition-old(root),::view-transition-new(root),::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
}