:root {
--dock-bar-height: 56px;
--dock-bar-surface: var(--color-surface-elevated);
}
@media (width <= 600px) {
:root { --dock-bar-height: 48px; }
}
.dock-bar {
position: relative;
z-index: var(--z-sticky-toolbar);
box-sizing: border-box;
min-height: var(--dock-bar-height);
padding: var(--space-sm) var(--space-md);
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
border-radius: var(--radius-lg);
}
.dock-bar.is-sticky {
position: sticky;
top: var(--header-height);
}
.dock-bar.is-docked {
background: var(--dock-bar-surface);
box-shadow: var(--shadow-sm);
border-start-start-radius: 0;
border-start-end-radius: 0;
}
body.dock-bar-docked .site-header { box-shadow: none; }
.dock-bar.is-docked::before {
content: '';
position: absolute;
inset-inline: 0;
bottom: 100%;
height: 6px;
background: var(--dock-bar-surface);
pointer-events: none;
}
@media (width <= 600px) {
.dock-bar {
border-radius: 0;
border-bottom: 1px solid transparent;
}
.dock-bar.is-docked {
border-bottom-color: var(--color-border);
}
body.dock-bar-docked { --header-notch-fill: var(--dock-bar-surface); }
}