/* Compact theme dock: pinned to the very top, with the site's active type and palette. */
:root{--hsa-theme-bar-h:46px;--hsa-theme-bar-stack:calc(var(--hsa-theme-bar-h) + var(--safe-top,env(safe-area-inset-top,0px)))}
#hsa-theme-strip{box-sizing:border-box;display:grid;grid-template-columns:48px repeat(8,minmax(0,1fr));align-items:center;gap:5px;height:var(--hsa-theme-bar-stack);padding:calc(5px + var(--safe-top,env(safe-area-inset-top,0px))) 14px 5px;margin:0;background:var(--bg,#171a29);color:var(--ink,#eceef5);border-bottom:1px solid var(--line,#34384a);box-shadow:0 1px 4px #0002;font:inherit;font-size:11px;line-height:1.1}
#hsa-theme-strip[data-layout=app]{position:fixed;z-index:1700;inset:0 0 auto}
#hsa-theme-strip[data-layout=revamp]{position:sticky;z-index:1700;top:0}
#hsa-theme-strip .hsa-strip-title{padding:0 4px;color:var(--muted,var(--ink));font-family:inherit;font-size:10px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#hsa-theme-strip button{--hsa-choice:var(--pink,#a88cff);min-width:0;height:34px;display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:4px 7px;border:1px solid transparent;border-radius:11px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
#hsa-theme-strip button:hover{background:color-mix(in srgb,var(--surface,#fff) 55%,transparent);border-color:var(--line,#454b5a)}
#hsa-theme-strip button:active{transform:scale(.98)}
#hsa-theme-strip button[aria-pressed=true]{background:color-mix(in srgb,var(--hsa-choice) 14%,var(--surface,#fff));border-color:var(--hsa-choice);box-shadow:0 1px 5px #0002}
#hsa-theme-strip button:focus-visible{outline:2px solid var(--hsa-choice);outline-offset:2px}
#hsa-theme-strip i{display:block;position:relative;flex:0 0 27px;height:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--hsa-choice) 45%,transparent);border-radius:7px;background:var(--preview);box-shadow:inset 0 0 0 1px #fff2}
#hsa-theme-strip i:after{content:'';position:absolute;left:4px;right:4px;bottom:4px;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 -6px 0 -0.5px var(--accent)}
#hsa-theme-strip button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-weight:650}
#hsa-theme-strip button[data-theme^="v20:"]{--hsa-choice:var(--pink,#a88cff)}
#hsa-theme-strip button[data-theme="midnight"]{--hsa-choice:#a9c1df}
#hsa-theme-strip button[data-theme="revamp"]{--hsa-choice:#b5453a}
#hsa-theme-strip button[data-theme="v20:crazy-beta"] i{border:2px solid #14001f;border-radius:3px;transform:rotate(-2deg)}
#hsa-theme-strip button[data-theme="v20:matrix"] i{border-radius:2px}
#hsa-theme-strip button[data-theme="midnight"] i{box-shadow:inset 0 0 12px #b8d2ec45}
#hsa-theme-strip button[data-theme="revamp"] i{border-radius:4px}
html[data-skin=crazy-beta] #hsa-theme-strip{font-family:var(--display,"Arial Black",Impact,sans-serif)}
html[data-skin=soft-beta] #hsa-theme-strip{font-family:var(--display,"Outfit",sans-serif)}
html[data-skin=matrix] #hsa-theme-strip{font-family:var(--mx-mono,ui-monospace,monospace);letter-spacing:.02em}
html.midnight #hsa-theme-strip{font-family:var(--body,"Moon Sans",sans-serif)}
html[data-skin=crazy-beta] #hsa-theme-strip{background:var(--cb-cyan,#00e5ff);color:var(--cb-black,#14001f);border-bottom:3px solid var(--cb-black,#14001f);box-shadow:0 3px 0 var(--cb-magenta,#ff00a8)}
html[data-skin=soft-beta] #hsa-theme-strip{border-bottom:2px solid var(--cb-magenta,#c58daa)}
html[data-skin=matrix] #hsa-theme-strip{color:var(--mx-green,#43e989);border-bottom-color:var(--mx-green,#43e989)}
html[data-theme=light] #hsa-theme-strip{color:var(--ink,#292a33)}
html.intro-pending #hsa-theme-strip{opacity:0;pointer-events:none}

/* The fixed V20/Midnight shell and desktop navigation start below the dock. */
#hsa-theme-strip[data-layout=app]+.app-header{top:var(--hsa-theme-bar-stack)!important}
@media(min-width:1024px){#hsa-theme-strip[data-layout=app]+.app-header~.tabbar{top:var(--hsa-theme-bar-stack)!important}}
@media(min-width:901px){html:root body[data-view] .view{top:calc(var(--hsa-theme-bar-stack) + var(--header-h) + var(--safe-top))!important}html:root body[data-view=map] #mapView{top:calc(var(--hsa-theme-bar-stack) + var(--header-h) + var(--safe-top))!important}}

/* Revamp uses a sticky header in document flow; keep it stacked below the dock. */
#hsa-theme-strip[data-layout=revamp]+header.top{top:var(--hsa-theme-bar-stack)!important}
html.ms-page body{padding-top:calc(var(--hsa-theme-bar-stack) + var(--header-h) + var(--safe-top))!important}
html.ms-page .ms-sections{top:calc(var(--hsa-theme-bar-stack) + var(--header-h) + var(--safe-top))!important}

@media(max-width:900px){
 :root{--hsa-theme-bar-h:70px}
 #hsa-theme-strip{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:10px repeat(2,23px);gap:2px 4px;padding:calc(4px + var(--safe-top,env(safe-area-inset-top,0px))) 8px 4px;font-size:10px}
 #hsa-theme-strip .hsa-strip-title{grid-column:1/-1;padding:0 2px}
 #hsa-theme-strip button{height:23px;gap:4px;padding:2px 3px;border-radius:7px}
 #hsa-theme-strip i{flex-basis:20px;height:16px;border-radius:5px}
 html:root body[data-view] .view{top:calc(var(--hsa-theme-bar-stack) + var(--header-h) + var(--safe-top))!important}
 html:root body[data-view=map] #mapView{top:calc(var(--hsa-theme-bar-stack) + var(--header-h) + var(--safe-top))!important}
 #hsa-theme-strip[data-layout=revamp]+header.top{top:var(--hsa-theme-bar-stack)!important}
}