/* Quick Dock: a floating bar of shortcuts (full-width bar on phones). Colors via the variables below. */
.cc-dock { --cc-dock-bg: var(--color-main); --cc-dock-fg: #fff; --cc-dock-accent: var(--color-fourth, var(--color-sec)); --cc-dock-h: 64px;
	position: fixed; z-index: 90; background: var(--cc-dock-bg); color: var(--cc-dock-fg); box-sizing: border-box; }
.cc-dock__list { display: flex; list-style: none; margin: 0; padding: 0; }
.cc-dock__item { margin: 0; padding: 0; }
.cc-dock__item::before { display: none !important; }
.cc-dock__link { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; color: inherit !important; text-decoration: none !important; font-weight: 600; line-height: 1.1; }
.cc-dock__icon { flex: 0 0 auto; width: 24px; height: 24px; display: block; }
.cc-dock__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.cc-dock__link[aria-current="page"]::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--cc-dock-accent); }
.cc-dock__link:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; border-radius: 999px; }
.cc-dock .cc-dock__live { position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5383b; }

/* Desktop: floating pill */
@media (min-width: 768px) {
	.cc-dock { left: 50%; bottom: 20px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100% - 32px)); border-radius: 999px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
	.cc-dock--desktop-hidden { display: none; }
	.cc-dock__link { padding-inline: 20px; }
	.cc-dock__link .cc-dock__live { left: 36px; }
	.cc-dock.is-away { transform: translate(-50%, calc(100% + 32px)); opacity: 0; }
	.cc-dock.cc-dock--js:focus-within { transform: translateX(-50%); opacity: 1; }
}

/* Phones: full-width bar */
@media (max-width: 767px) {
	.cc-dock { left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
	.cc-dock__item { flex: 1 1 0; min-width: 0; }
	.cc-dock__link { flex-direction: column; justify-content: center; text-align: center; gap: 4px; min-height: 56px; padding: 8px 4px; font-size: 1.1em; }
	.cc-dock__label { max-width: 100%; }
	.cc-dock__link[aria-current="page"]::after { left: 22%; right: 22%; bottom: 0; }
	.cc-dock__link .cc-dock__live { top: 6px; left: calc(50% + 8px); }
	.cc-dock.is-away { transform: translateY(100%); opacity: 0; }
	.cc-dock.cc-dock--js:focus-within { transform: none; opacity: 1; }
	body.cc-has-dock::after { content: ''; display: block; height: calc(var(--cc-dock-h, 64px) + env(safe-area-inset-bottom)); background: var(--color-footer-bg, #111); }
}

.cc-dock--js { transition: transform .25s ease, opacity .25s ease; }
.cc-dock.is-suppressed, body:has(dialog[open]) .cc-dock, body:has(#popup-menu[style*="block"]) .cc-dock { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .cc-dock { transition: none; } }
