/* Header destinations replace the clipped mobile shortcut rail. */
header .header-tools>.browse-trigger{display:inline-flex!important;width:auto!important;min-width:88px;min-height:44px;padding:10px 12px!important;gap:6px;font-size:14px!important;white-space:nowrap;color:var(--text)!important;background:var(--surface)!important;border:1px solid var(--edge)!important;border-radius:14px}
.browse-menu{position:absolute;right:22px;top:100%;z-index:30;display:flex;flex-direction:column;gap:4px;width:240px;max-width:calc(100vw - 32px);max-height:65dvh;overflow-y:auto;padding:10px;background:var(--surface);color:var(--text);border:1px solid var(--edge);border-radius:16px;box-shadow:0 14px 35px #0004}
header .browse-menu button{text-align:left;min-height:44px;padding:11px 14px;color:var(--text);border-radius:10px}
header .browse-menu button.active{background:var(--thyme);color:#211E18}
header .browse-menu button:hover:where(html.ll-mouse-input *){background:var(--soft-bg)}
header .browse-menu button.active:hover:where(html.ll-mouse-input *){background:var(--thyme)}
#utility-menu .lighting-pop{position:static!important;display:flex;flex-direction:column;align-items:stretch;width:100%!important;min-width:0;max-width:none;padding:10px;margin:0 0 8px;background:transparent!important;border:0;border-bottom:1px solid var(--edge);border-radius:0;box-shadow:none}
#utility-menu .lighting-switch{width:100%;min-height:44px;font-size:16px}
#utility-menu .lighting-hint{white-space:normal}
#utility-menu{max-height:75dvh;overflow-y:auto}
/* Browser anchoring must not compete with explicit shelf/grid preservation. */
#page{overflow-anchor:none}
@media(max-width:720px){
 header .ll-top-row{gap:10px}
 header .header-tools{gap:6px}
 header .header-tools>.browse-trigger{min-width:82px;padding:9px!important;font-size:13px!important}
 .browse-menu{right:16px}
}
@media(max-width:360px){
 header .header-tools>.taste-icon{display:none!important}
}
/* Desktop keeps direct destinations; Browse is for the compact phone header. */
@media(min-width:721px){
 header .header-tools>.browse-trigger{display:none!important}
 #browse-menu{display:none!important}
}
@media(max-height:560px) and (orientation:landscape) and (pointer:coarse){
 header .header-tools>.browse-trigger{display:inline-flex!important}
 #browse-menu:not(.hidden){display:flex!important}
}
.mobile-dock,.collection-segments,.layout-toggle,#browse-menu,
.mobile-dock button,.collection-segments button,.layout-toggle button,#browse-menu button{touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
html .gesture-previewing:not(.mobile-dock) button{background:transparent!important;color:var(--muted)!important;box-shadow:none!important}
html .gesture-previewing:not(.mobile-dock) button.gesture-preview{background:var(--chip-active)!important;color:var(--chip-selected-text)!important}
html[data-lighting="day"] .gesture-previewing:not(.mobile-dock) button.gesture-preview{background:var(--chip-active)!important;color:var(--chip-selected-text)!important}
/* The moving highlight, not the old selection, determines dock contrast. */
html[data-lighting] .mobile-dock.is-dragging button:not(.dock-preview){color:var(--muted)!important}
html[data-lighting] .mobile-dock.is-dragging button.dock-preview{color:var(--chip-selected-text)!important}
/* Theme options stay inline, with no nested popup or horizontal scroll. */
html #utility-menu{width:292px;min-width:0;max-width:calc(100vw - 28px);padding:10px;overflow-x:hidden;top:calc(100% + 6px)}
html #utility-menu #lighting-pop{padding:8px 3px 14px;margin:0 0 6px;gap:9px}
#utility-menu .theme-heading{font-size:12px;font-weight:700;color:var(--muted);padding:0 4px}
#utility-menu .theme-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;border:1px solid var(--edge);border-radius:12px;background:var(--soft-bg);min-width:0}
html #utility-menu .theme-choices button{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:44px;margin:0;padding:8px 3px;font-size:12px;line-height:1.2;white-space:nowrap;color:var(--muted);border:0;border-radius:8px;background:transparent}
html #utility-menu .theme-choices button[aria-pressed="true"]{background:var(--chip-active)!important;color:var(--chip-selected-text)!important}
html #utility-menu .theme-choices button:not([aria-pressed="true"]):hover:where(html.ll-mouse-input *){background:var(--item-hover)!important;color:var(--text)!important}
html #utility-menu #lighting-hint{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.4;padding:0 4px;margin:0}
html #utility-menu #lighting-hint:empty{display:none}
.theme-choices,.theme-choices button{touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
/* Selected tabs share the same foreground token as every accent-filled switch. */
html[data-lighting] body .personal-tabs button[aria-pressed="true"],
html[data-lighting] body .personal-tabs button[aria-pressed="true"]:hover:where(html.ll-mouse-input *){background:var(--chip-active)!important;color:var(--chip-selected-text)!important}