/* Dock in the middle of the top bar (computer only), modelled on the macOS-style dock:
   a light pill with plain line icons, thin dividers, a soft circle behind the icon under the pointer
   and a small label with an arrow. --s is the spring-driven size factor per icon (dock.js); icons grow downwards. */
.shell>header{position:relative}
#strippi-dock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;--dock-size:38px;
 margin:0!important;padding:0!important;overflow:visible!important;display:block!important}
.dock-shelf{display:flex;align-items:flex-start;gap:12px;height:calc(var(--dock-size) + 10px);padding:5px 14px;border-radius:999px;box-sizing:border-box;
 background:rgba(255,255,255,.86);border:1px solid rgba(20,30,30,.06);
 box-shadow:0 1px 2px rgba(20,30,30,.04),0 8px 24px -6px rgba(20,30,30,.12);
 -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
html.night .dock-shelf{background:rgba(15,51,55,.78);border-color:var(--n-line-strong);box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -8px rgba(0,0,0,.55)}
.dock-sep{flex:0 0 1px;align-self:center;height:22px;margin:0 2px;background:rgba(20,30,30,.12)}
html.night .dock-sep{background:rgba(243,234,219,.14)}
.dock-item{--s:1;position:relative;flex:0 0 auto;width:calc(var(--dock-size)*var(--s));height:calc(var(--dock-size)*var(--s))}
/* Plain icons; the circle only appears behind the icon under the pointer */
.dock-item>button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;
 border:0!important;border-radius:50%!important;cursor:pointer;color:#5f6668;background:transparent!important;box-shadow:none!important;transition:background .18s ease,color .18s ease}
.dock-item>button svg{width:58%;height:58%;display:block;overflow:visible}
.dock-item>button:hover{background:rgba(20,30,30,.07)!important;color:#2b3133}
.dock-item>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html.night .dock-item>button{color:var(--n-muted)}
html.night .dock-item>button:hover{background:rgba(255,255,255,.08)!important;color:var(--n-text)}
/* Switched on: accent colour and the little "running" dot of the macOS dock */
.dock-item.is-on>button{color:var(--accent)}
html.night .dock-item.is-on>button{color:var(--n-lime-hi)}
.dock-item.is-on::after{content:"";position:absolute;left:50%;bottom:-4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
/* The moved sun/moon button keeps its own drawing */
.dock-item>.theme-toggle svg{width:56%;height:56%}
/* Label below the icon with a small arrow, fades in on hover (150 ms) */
.dock-tip{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,-3px);white-space:nowrap;pointer-events:none;opacity:0;z-index:2;
 font-size:12px;font-weight:500;line-height:1;padding:7px 10px;border-radius:8px;color:#2b3133;background:#fff;border:1px solid rgba(20,30,30,.1);
 box-shadow:0 6px 16px -6px rgba(20,30,30,.22);transition:opacity .15s ease,transform .15s ease}
.dock-tip::before{content:"";position:absolute;left:50%;top:-5px;width:8px;height:8px;margin-left:-4px;background:inherit;border-left:inherit;border-top:inherit;transform:rotate(45deg);border-radius:2px 0 0 0}
html.night .dock-tip{background:var(--n-panel-solid);color:var(--n-text);border-color:var(--n-line-strong)}
.dock-item:hover>.dock-tip,.dock-item:focus-within>.dock-tip{opacity:1;transform:translate(-50%,0)}
/* Computer: the dock replaces the controls in the sidebar */
@media(min-width:761px){
 .mercury-account,.focus-appearance{display:none!important}
}
/* Narrow computer windows: smaller dock, search shrinks to its icon, the status pill is shortened */
@media(min-width:761px) and (max-width:1180px){
 #strippi-dock{--dock-size:32px}.dock-shelf{gap:6px;padding:5px 10px}
 #mercury-search{max-width:34px;overflow:hidden;white-space:nowrap;flex:0 0 auto}
 .shell>header .pill{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Phone: no dock; the menu keeps all controls */
@media(max-width:760px){#strippi-dock{display:none!important}}
@media(prefers-reduced-motion:reduce){.dock-tip,.dock-item>button{transition:none}}