/* ==========================================================================
   Jo Cor — glass header (round 12, jocor_hero 2.4.0)

   One strip of deep glass over the starfield, one icon language (.jg-hbtn),
   and one panel for every pop-up the bar opens: the apps launcher, unified
   search, notifications, contacts and the account menu.

   Why every selector starts with `html body #header#header#header`:
   jocor_hero.css styles the bar at (2,4,0) (`#header#header ... :not(...)`)
   and Application.php's late inline <style> comes after every sheet. Both use
   !important. Tripling the id outranks them without editing either, so this
   file can land beside the other round-12 work on jocor_hero untouched.

   Open state is shown the same way everywhere: the button fills with
   --jg-glass-hi and a short blue light sits on the bar's lower edge under it.
   ========================================================================== */

:root {
	--jg-void: #020308;
	--jg-ink: #e9eefb;
	--jg-ink-2: #9aa7c4;
	--jg-blue: #4d8dff;
	--jg-blue-deep: #0a1a3f;
	--jg-glass: rgba(8, 12, 26, .58);
	--jg-glass-hi: rgba(14, 22, 46, .72);
	--jg-edge: rgba(150, 180, 255, .14);
	--jg-sheen: inset 0 1px 0 rgba(255, 255, 255, .06);
	--jg-blur: blur(20px) saturate(150%);
	--jg-radius: 14px;
	--jg-radius-s: 10px;
	--jg-shadow: 0 18px 48px -18px rgba(0, 0, 0, .8);
	--jg-focus: 0 0 0 2px var(--jg-void), 0 0 0 4px var(--jg-blue);
	--jg-ease: cubic-bezier(.2, .8, .2, 1);
	--jg-fast: 140ms;
	--jg-med: 240ms;
	--jg-slow: 520ms;

	/* Header-local, derived from the tokens above. */
	--jg-bar-h: var(--jocor-header-h, 64px);
	--jg-pop-gap: 8px;
	--jg-pop-w: 384px;
	--jg-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. THE STRIP
   The glass lives on ::before (a filtered #header would become the containing
   block of the fixed pop-ups and clip them — see Application.php).
   ========================================================================== */
html body #header#header#header:not(.header-guest) {
	height: var(--jg-bar-h) !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	font-family: var(--jg-font) !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest)::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	height: auto !important;
	margin: 0 !important;
	pointer-events: none !important;
	/* Glass, deepened toward --jg-void at the top edge so the bar reads black
	   over the bright parts of the starfield and still shows it through. */
	background: linear-gradient(180deg, rgba(2, 3, 8, .42), rgba(2, 3, 8, .16)), var(--jg-glass) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--jg-edge) !important;
	box-shadow: var(--jg-sheen), 0 12px 32px -28px rgba(0, 0, 0, .9) !important;
	backdrop-filter: var(--jg-blur) !important;
	-webkit-backdrop-filter: var(--jg-blur) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html body #header#header#header:not(.header-guest)::before {
		background: rgba(6, 9, 20, .94) !important;
	}
}

html body #header#header#header:not(.header-guest) .header-start,
html body #header#header#header:not(.header-guest) .header-end {
	height: var(--jg-bar-h) !important;
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	margin: 0 !important;
	overflow: visible !important;
}
html body #header#header#header:not(.header-guest) .header-start {
	padding-inline-start: max(12px, env(safe-area-inset-left, 0px)) !important;
}
html body #header#header#header:not(.header-guest) .header-end {
	padding-inline-end: max(12px, env(safe-area-inset-right, 0px)) !important;
	justify-content: flex-end !important;
}
/* NC wraps some triggers in a div/nav of its own; make those wrappers
   transparent boxes the size of their button, so spacing is one rule. */
html body #header#header#header:not(.header-guest) .header-end > .header-menu,
html body #header#header#header:not(.header-guest) .header-end > div,
html body #header#header#header:not(.header-guest) .header-end > nav,
html body #header#header#header:not(.header-guest) #notifications {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: var(--jg-bar-h) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	flex: 0 0 auto !important;
}

/* The mark. A 40px hit box like every other control, logo at 30px. */
html body #header#header#header:not(.header-guest) #nextcloud {
	display: grid !important;
	place-items: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	margin: 0 6px 0 0 !important;
	padding: 0 !important;
	border-radius: var(--jg-radius-s) !important;
	outline: none !important;
}
html body #header#header#header:not(.header-guest) #nextcloud .logo {
	position: static !important;
	width: 32px !important;
	height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	margin: 0 !important;
	opacity: .92;
	transition: opacity var(--jg-fast) var(--jg-ease) !important;
}
html body #header#header#header:not(.header-guest) #nextcloud:hover .logo {
	opacity: 1;
}
html body #header#header#header:not(.header-guest) #nextcloud:focus-visible {
	box-shadow: var(--jg-focus) !important;
}

/* ==========================================================================
   2. .jg-hbtn — THE ONE ICON BUTTON
   Anything in the bar carrying this class looks and behaves the same: 40x40
   hit area, 22px icon in --jg-ink, a --jg-radius-s square of glass on hover
   and when open, a blue light under it when open or pressed, --jg-focus ring.
   The pirate toggle (jocor_pirates) is dropped into .header-end with this
   class and a 22px <svg>/<img> inside; it needs no CSS of its own.
   ========================================================================== */
html body #header#header#header:not(.header-guest) .jg-hbtn {
	all: unset;
	pointer-events: auto !important;
	position: relative !important;
	box-sizing: border-box !important;
	display: inline-grid !important;
	place-items: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--jg-radius-s) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--jg-ink) !important;
	opacity: 1 !important;
	transform: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--jg-fast) var(--jg-ease), color var(--jg-fast) var(--jg-ease) !important;
}
/* Vue's NcButton wrappers inside: collapse them to the icon. */
html body #header#header#header:not(.header-guest) .jg-hbtn .button-vue__wrapper,
html body #header#header#header:not(.header-guest) .jg-hbtn .button-vue__icon {
	display: grid !important;
	place-items: center !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn .button-vue__text:empty {
	display: none !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn svg,
html body #header#header#header:not(.header-guest) .jg-hbtn > img,
html body #header#header#header:not(.header-guest) .jg-hbtn .jg-hbtn__icon {
	width: 22px !important;
	height: 22px !important;
	color: currentColor !important;
	fill: currentColor !important;
	opacity: .86 !important;
	transition: opacity var(--jg-fast) var(--jg-ease) !important;
}
/* Some NC icons ship at 20px through a --size custom property. */
html body #header#header#header:not(.header-guest) .jg-hbtn .material-design-icon,
html body #header#header#header:not(.header-guest) .jg-hbtn .icon-vue {
	display: grid !important;
	place-items: center !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	min-height: 22px !important;
	opacity: 1 !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn:hover {
	background: var(--jg-glass-hi) !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn:hover svg,
html body #header#header#header:not(.header-guest) .jg-hbtn:hover > img,
html body #header#header#header:not(.header-guest) .jg-hbtn:hover .jg-hbtn__icon,
html body #header#header#header:not(.header-guest) .jg-hbtn:is([aria-expanded="true"], [aria-pressed="true"], .jg-is-open) svg,
html body #header#header#header:not(.header-guest) .jg-hbtn:is([aria-expanded="true"], [aria-pressed="true"], .jg-is-open) > img,
html body #header#header#header:not(.header-guest) .jg-hbtn:is([aria-expanded="true"], [aria-pressed="true"], .jg-is-open) .jg-hbtn__icon {
	opacity: 1 !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn:is([aria-expanded="true"], .jg-is-open) {
	background: var(--jg-glass-hi) !important;
	box-shadow: inset 0 0 0 1px var(--jg-edge) !important;
}
/* The light on the bar's edge: open menus and pressed toggles. */
html body #header#header#header:not(.header-guest) .jg-hbtn::after {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	bottom: calc((40px - var(--jg-bar-h)) / 2) !important;
	width: 18px !important;
	height: 2px !important;
	margin-left: -9px !important;
	border-radius: 2px !important;
	background: var(--jg-blue) !important;
	box-shadow: 0 0 10px 1px rgba(77, 141, 255, .55) !important;
	opacity: 0 !important;
	transform: scaleX(.3) !important;
	transition: opacity var(--jg-med) var(--jg-ease), transform var(--jg-med) var(--jg-ease) !important;
	pointer-events: none !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn:is([aria-expanded="true"], [aria-pressed="true"], .jg-is-open)::after {
	opacity: 1 !important;
	transform: scaleX(1) !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn:focus-visible {
	outline: none !important;
	box-shadow: var(--jg-focus) !important;
}
html body #header#header#header:not(.header-guest) .jg-hbtn:active {
	background: rgba(77, 141, 255, .16) !important;
}

/* --- Badges on buttons (unread notifications) -------------------------- */
html body #header#header#header:not(.header-guest) .notifications-button__icon {
	position: relative !important;
	display: grid !important;
	place-items: center !important;
}
/* NC draws the unread dot inside the bell SVG in red; recolour it blue. */
html body #header#header#header:not(.header-guest) .notifications-button svg circle,
html body #header#header#header:not(.header-guest) .notifications-button svg .notification__dot,
html body #header#header#header:not(.header-guest) .notifications-button svg [fill="#E9322D"],
html body #header#header#header:not(.header-guest) .notifications-button svg [fill="#e9322d"] {
	fill: var(--jg-blue) !important;
	color: var(--jg-blue) !important;
	stroke: var(--jg-void) !important;
	stroke-width: 1.5px !important;
}

/* --- Apps (launcher) button: the 3x3 dots drawn at the icon size ------- */
html body #header#header#header:not(.header-guest) #jl-button .jl-button__grid {
	width: 18px !important;
	height: 18px !important;
	color: var(--jg-ink) !important;
	opacity: .86 !important;
	background-image: radial-gradient(currentColor 1.6px, transparent 1.9px) !important;
	background-size: 6px 6px !important;
	background-position: 0 0 !important;
}
html body #header#header#header:not(.header-guest) #jl-button:is(:hover, [aria-expanded="true"]) .jl-button__grid {
	opacity: 1 !important;
}

/* --- Nyx widget toggle -------------------------------------------------
   nyx_widget draws a text pill and a dot; the label is already hidden. Here
   the dot becomes a proper 22px glyph (a four-point spark, the usual mark for
   "AI") masked from an inline SVG so it takes currentColor, and the on state
   is the same edge light as an open menu plus a solid blue spark. */
html body #header#header#header:not(.header-guest) #nyx-ai-toggle-btn .nyx-ai-toggle-label {
	display: none !important;
}
html body #header#header#header:not(.header-guest) #nyx-ai-toggle-btn .nyx-ai-toggle-dot {
	display: block !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 0 !important;
	background: currentColor !important;
	box-shadow: none !important;
	opacity: .62 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.5 4.9 2.6 7 7.5 7.5v1c-4.9.5-7 2.6-7.5 7.5h-1c-.5-4.9-2.6-7-7.5-7.5v-1c4.9-.5 7-2.6 7.5-7.5z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M19 15.5c.2 1.8 1 2.6 2.8 2.8-1.8.2-2.6 1-2.8 2.8-.2-1.8-1-2.6-2.8-2.8 1.8-.2 2.6-1 2.8-2.8z'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.5 4.9 2.6 7 7.5 7.5v1c-4.9.5-7 2.6-7.5 7.5h-1c-.5-4.9-2.6-7-7.5-7.5v-1c4.9-.5 7-2.6 7.5-7.5z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M19 15.5c.2 1.8 1 2.6 2.8 2.8-1.8.2-2.6 1-2.8 2.8-.2-1.8-1-2.6-2.8-2.8 1.8-.2 2.6-1 2.8-2.8z'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
	transition: opacity var(--jg-fast) var(--jg-ease), background-color var(--jg-fast) var(--jg-ease) !important;
}
html body #header#header#header:not(.header-guest) #nyx-ai-toggle-btn:hover .nyx-ai-toggle-dot {
	opacity: .9 !important;
}
html body #header#header#header:not(.header-guest) #nyx-ai-toggle-btn.nyx-ai-on .nyx-ai-toggle-dot {
	background: var(--jg-blue) !important;
	opacity: 1 !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.5 4.9 2.6 7 7.5 7.5v1c-4.9.5-7 2.6-7.5 7.5h-1c-.5-4.9-2.6-7-7.5-7.5v-1c4.9-.5 7-2.6 7.5-7.5z'/%3E%3Cpath d='M19 15.5c.2 1.8 1 2.6 2.8 2.8-1.8.2-2.6 1-2.8 2.8-.2-1.8-1-2.6-2.8-2.8 1.8-.2 2.6-1 2.8-2.8z'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.5 4.9 2.6 7 7.5 7.5v1c-4.9.5-7 2.6-7.5 7.5h-1c-.5-4.9-2.6-7-7.5-7.5v-1c4.9-.5 7-2.6 7.5-7.5z'/%3E%3Cpath d='M19 15.5c.2 1.8 1 2.6 2.8 2.8-1.8.2-2.6 1-2.8 2.8-.2-1.8-1-2.6-2.8-2.8 1.8-.2 2.6-1 2.8-2.8z'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important;
}

/* --- Account avatar: a 30px photo inside the 40px button --------------- */
html body #header#header#header:not(.header-guest) #user-menu .jg-hbtn {
	border-radius: 50% !important;
}
html body #header#header#header:not(.header-guest) #user-menu .avatardiv {
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	max-width: 30px !important;
	max-height: 30px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 1px var(--jg-edge) !important;
	box-sizing: border-box !important;
}
html body #header#header#header:not(.header-guest) #user-menu .avatardiv img {
	width: 30px !important;
	height: 30px !important;
	max-width: 30px !important;
	max-height: 30px !important;
	object-fit: cover !important;
	opacity: 1 !important;
}
html body #header#header#header:not(.header-guest) #user-menu .avatardiv__user-status {
	right: -3px !important;
	bottom: -3px !important;
	width: 12px !important;
	height: 12px !important;
	border: 2px solid var(--jg-void) !important;
	border-radius: 50% !important;
	background-color: var(--jg-void) !important;
}
html body #header#header#header:not(.header-guest) #user-menu .avatardiv__user-status svg {
	width: 8px !important;
	height: 8px !important;
	opacity: 1 !important;
}

/* ==========================================================================
   3. SEARCH IN THE BAR
   Wide screens: a quiet glass field centred in the bar. Below 1024px NC turns
   it into an icon on its own; that icon is a .jg-hbtn.
   ========================================================================== */
html body #header#header#header:not(.header-guest) .unified-search-menu {
	flex: 0 1 auto !important;
	height: var(--jg-bar-h) !important;
}
html body #header#header#header:not(.header-guest) .unified-search-input__button:not(.jg-hbtn) {
	all: unset;
	pointer-events: auto !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: clamp(240px, 30vw, 440px) !important;
	height: 40px !important;
	padding: 0 14px !important;
	border-radius: var(--jg-radius-s) !important;
	background: rgba(2, 3, 8, .34) !important;
	box-shadow: inset 0 0 0 1px var(--jg-edge) !important;
	color: var(--jg-ink-2) !important;
	font: 400 14px/1 var(--jg-font) !important;
	margin-inline: auto !important;
	cursor: text !important;
	transition: background-color var(--jg-fast) var(--jg-ease), box-shadow var(--jg-fast) var(--jg-ease) !important;
}
html body #header#header#header:not(.header-guest) .unified-search-input__button:not(.jg-hbtn):hover {
	background: var(--jg-glass-hi) !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) .unified-search-input__button:not(.jg-hbtn):focus-visible {
	box-shadow: var(--jg-focus) !important;
}
html body #header#header#header:not(.header-guest) .unified-search-input__button:not(.jg-hbtn) .unified-search-input__icon,
html body #header#header#header:not(.header-guest) .unified-search-input__button:not(.jg-hbtn) svg {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px !important;
	opacity: .86 !important;
	color: currentColor !important;
	fill: currentColor !important;
}
html body #header#header#header:not(.header-guest) .unified-search-input__label {
	overflow: hidden !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	color: inherit !important;
}
/* NC centres the field in the bar itself (.unified-search-input is absolute
   against #header); only its height and look change here. */

/* ==========================================================================
   4. THE PANEL — shared by every pop-up
   ========================================================================== */
html body #header#header#header:not(.header-guest) .header-menu__wrapper,
html body .jl-panel.jl-panel,
html body #unified-search .modal-container {
	color-scheme: dark;
	box-sizing: border-box !important;
	/* --jg-glass-hi over a --jg-void wash: text stays AA (ink-2 >= 4.5:1)
	   even where the brightest part of the starfield sits behind a panel. */
	background: linear-gradient(rgba(2, 3, 8, .5), rgba(2, 3, 8, .5)), var(--jg-glass-hi) !important;
	border: 1px solid var(--jg-edge) !important;
	border-radius: var(--jg-radius) !important;
	box-shadow: var(--jg-sheen), var(--jg-shadow) !important;
	backdrop-filter: var(--jg-blur) !important;
	-webkit-backdrop-filter: var(--jg-blur) !important;
	color: var(--jg-ink) !important;
	font-family: var(--jg-font) !important;
	filter: none !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	html body #header#header#header:not(.header-guest) .header-menu__wrapper,
	html body .jl-panel.jl-panel,
	html body #unified-search .modal-container {
		background: rgba(6, 9, 20, .94) !important;
	}
}

/* Header menus: anchored under the bar, right edge, one width. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper {
	position: fixed !important;
	top: calc(var(--jg-bar-h) + var(--jg-pop-gap)) !important;
	right: max(8px, env(safe-area-inset-right, 0px)) !important;
	left: auto !important;
	z-index: 4000 !important;
	inline-size: min(var(--jg-pop-w), calc(100vw - 16px)) !important;
	min-width: 0 !important;
	max-width: calc(100vw - 16px) !important;
	max-height: calc(100dvh - var(--jg-bar-h) - 24px) !important;
	margin: 0 !important;
	padding: 6px !important;
	overflow: hidden !important;
	display: flex;
	flex-direction: column !important;
	transform-origin: top right;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper[style*="display: none"] {
	display: none !important;
}
html body #header#header#header:not(.header-guest) .header-menu__content {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	max-height: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: auto !important;
	overscroll-behavior: contain;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(150, 180, 255, .28) transparent;
}
/* Application.php's late style gives the inner boxes (content, notification
   container/list, search results) their own blur and border: one panel, one
   blur, so every descendant is flat. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper *,
html body #unified-search .modal-container * {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(.notification-container, .notification-wrapper),
html body #unified-search .unified-search__results {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
html body #header#header#header:not(.header-guest) :is(.header-menu__carret, .header-menu__caret) {
	display: none !important;
}

/* The one panel heading. header.js adds .jg-pop-head to the menus that have
   none; the launcher's own .jl-head and the search dialog's name use it too. */
html body .jg-pop-head,
html body .jl-panel.jl-panel .jl-head__title,
html body #unified-search .dialog__name {
	margin: 0 !important;
	padding: 10px 10px 8px !important;
	font: 600 15px/1.3 var(--jg-font) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-align: start !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) .jg-pop-head {
	flex: 0 0 auto;
}

/* One row. Every list the pop-ups show hangs off this. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(.list-item, .contact, .notification),
html body #unified-search :is(.list-item, .search-result, .unified-search-modal__results a) {
	border-radius: var(--jg-radius-s) !important;
	background: transparent !important;
	color: var(--jg-ink) !important;
	box-shadow: none !important;
	transition: background-color var(--jg-fast) var(--jg-ease) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(.list-item, .contact):hover,
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(.list-item, .contact):focus-within,
html body #unified-search :is(.list-item, .search-result):is(:hover, :focus-within) {
	background: rgba(150, 180, 255, .08) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper a,
html body #header#header#header:not(.header-guest) .header-menu__wrapper button {
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(a, button, input, [tabindex]):focus-visible,
html body .jl-panel.jl-panel :is(a, button):focus-visible,
html body #unified-search :is(a, button, input):focus-visible {
	outline: none !important;
	box-shadow: var(--jg-focus) !important;
}
/* Secondary text everywhere in the panels. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(.list-item-content__subname, .notification-time, .contact__subtitle, .empty-content__description),
html body #unified-search :is(.list-item-content__subname, .empty-content__description) {
	color: var(--jg-ink-2) !important;
	opacity: 1 !important;
}
/* Icons in rows: monochrome, the same weight as the bar. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper :is(.account-menu-entry__icon, .notification-icon) {
	filter: brightness(0) invert(.92) !important;
	opacity: .86 !important;
}
/* NC's empty states, quiet. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper .empty-content,
html body #unified-search .empty-content {
	margin: 18px 0 !important;
	color: var(--jg-ink-2) !important;
	background: transparent !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .empty-content__icon,
html body #unified-search .empty-content__icon {
	opacity: .5 !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .empty-content__name,
html body #unified-search .empty-content__name {
	font: 500 14px/1.4 var(--jg-font) !important;
	color: var(--jg-ink-2) !important;
}

/* Inputs inside panels (contacts search, unified search). */
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__input,
html body #unified-search .input-field__input {
	height: 40px !important;
	border: 0 !important;
	border-radius: var(--jg-radius-s) !important;
	background: rgba(2, 3, 8, .42) !important;
	box-shadow: inset 0 0 0 1px var(--jg-edge) !important;
	color: var(--jg-ink) !important;
	font: 400 14px/1 var(--jg-font) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__input:focus,
html body #unified-search .input-field__input:focus {
	outline: none !important;
	box-shadow: var(--jg-focus) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__label,
html body #unified-search .input-field__label {
	color: var(--jg-ink-2) !important;
}
/* When NC floats the label onto the field's edge it needs a solid chip. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__input:focus + .input-field__label,
html body #unified-search .input-field__input:focus + .input-field__label,
html body #unified-search .input-field__input:not(:placeholder-shown) + .input-field__label {
	background: #0b1226 !important;
	border-radius: 4px !important;
	padding-inline: 4px !important;
}
html body #unified-search .input-field__main-wrapper,
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__main-wrapper {
	background: transparent !important;
}
html body #unified-search .input-field__main-wrapper::before,
html body #unified-search .input-field__main-wrapper::after,
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__main-wrapper::before,
html body #header#header#header:not(.header-guest) .header-menu__wrapper .input-field__main-wrapper::after {
	display: none !important;
}

/* Panel buttons: ghost by default, blue only for the one primary action. */
html body #header#header#header:not(.header-guest) .header-menu__wrapper .button-vue:not(.button-vue--primary),
html body #unified-search .button-vue:not(.button-vue--primary),
html body .jl-panel.jl-panel .jl-head__edit {
	background: transparent !important;
	border: 1px solid var(--jg-edge) !important;
	border-radius: var(--jg-radius-s) !important;
	box-shadow: none !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .button-vue--icon-only:not(.button-vue--primary),
html body #unified-search .modal-container__close,
html body #unified-search .button-vue--icon-only:not(.button-vue--primary) {
	border-color: transparent !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .button-vue:not(.button-vue--primary):hover,
html body #unified-search .button-vue:not(.button-vue--primary):hover,
html body .jl-panel.jl-panel .jl-head__edit:hover {
	background: rgba(150, 180, 255, .08) !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .button-vue--primary,
html body #unified-search .button-vue--primary {
	background: var(--jg-blue) !important;
	border: 0 !important;
	border-radius: var(--jg-radius-s) !important;
	color: var(--jg-void) !important;
	box-shadow: none !important;
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper .button-vue--primary *,
html body #unified-search .button-vue--primary * {
	color: var(--jg-void) !important;
}

/* --- Notifications -------------------------------------------------------- */
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-container,
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification {
	margin: 0 0 2px !important;
	padding: 10px 10px 12px !important;
	border: 0 !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification:hover {
	background: rgba(150, 180, 255, .06) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-heading {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	min-height: 0 !important;
	margin: -4px -4px 0 0 !important;
	font-size: 12px !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-subject {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
	font: 600 14px/1.35 var(--jg-font) !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-subject .image {
	flex: 0 0 32px !important;
	width: 32px !important;
	height: 32px !important;
	display: grid !important;
	place-items: center !important;
	margin: 0 !important;
	border-radius: var(--jg-radius-s) !important;
	background: rgba(150, 180, 255, .08) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-icon {
	width: 18px !important;
	height: 18px !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-message,
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-actions,
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-full-message {
	padding-inline-start: 42px !important;
	margin-top: 4px !important;
	font: 400 13px/1.5 var(--jg-font) !important;
	color: var(--jg-ink-2) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-message * {
	color: inherit !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .message-container.collapsed {
	max-height: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-overflow {
	background: none !important;
	display: none !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin-top: 10px !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification-actions .button-vue {
	float: none !important;
	margin: 0 !important;
	min-height: 34px !important;
	font: 500 13px/1 var(--jg-font) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .notification--new .notification-subject::after {
	content: "" !important;
	flex: 0 0 6px !important;
	width: 6px !important;
	height: 6px !important;
	margin-inline-start: auto !important;
	border-radius: 50% !important;
	background: var(--jg-blue) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .dismiss-all {
	position: static !important;
	display: flex !important;
	justify-content: center !important;
	margin: 4px 0 0 !important;
	padding: 6px 0 0 !important;
	border-top: 1px solid var(--jg-edge) !important;
	background: transparent !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .dismiss-all .button-vue {
	border-color: transparent !important;
	color: var(--jg-ink-2) !important;
	font: 500 13px/1 var(--jg-font) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .dismiss-all .button-vue * {
	color: inherit !important;
}
html body #header#header#header:not(.header-guest) #header-menu-notifications .dismiss-all .button-vue:hover {
	color: var(--jg-ink) !important;
}

/* --- Contacts ------------------------------------------------------------- */
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	background: transparent !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu__search-container {
	position: sticky !important;
	top: 0 !important;
	z-index: 1 !important;
	padding: 4px 4px 6px !important;
	background: transparent !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu__input-wrapper {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu__content,
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu__list,
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu ul {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact {
	min-height: 44px !important;
	padding: 4px 6px !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact__body__full-name,
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact .full-name {
	font: 500 14px/1.3 var(--jg-font) !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu :is(.contact__body__last-message, .contact__body__status-message, .contact__body__email-address, .last-message, .email-address) {
	font: 400 12.5px/1.3 var(--jg-font) !important;
	color: var(--jg-ink-2) !important;
	opacity: 1 !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact .avatardiv {
	box-shadow: 0 0 0 1px var(--jg-edge) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact :is(.button-vue, .action-item__menutoggle) {
	border-color: transparent !important;
	opacity: .8;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact:hover :is(.button-vue, .action-item__menutoggle) {
	opacity: 1;
}
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu__show-all,
html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contactsmenu__menu a[href*="/apps/contacts"] {
	color: var(--jg-ink-2) !important;
}

/* --- Account menu ---------------------------------------------------------- */
html body #header#header#header:not(.header-guest) #header-menu-user-menu .account-menu__list {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .list-item {
	min-height: 40px !important;
	padding: 4px 10px !important;
	border: 0 !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .list-item__anchor {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 32px !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .list-item-content__name {
	font: 450 14px/1.3 var(--jg-font) !important;
	color: var(--jg-ink) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .account-menu-entry__icon,
html body #header#header#header:not(.header-guest) #header-menu-user-menu .user-status-icon {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
}
/* The profile row is the panel's head: larger name, a hairline under it. */
html body #header#header#header:not(.header-guest) #header-menu-user-menu .account-menu__list > li:first-child {
	margin-bottom: 4px !important;
	padding-bottom: 4px !important;
	border-bottom: 1px solid var(--jg-edge) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .account-menu__list > li:first-child .list-item {
	padding-block: 8px !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .account-menu__list > li:first-child .list-item-content__name {
	font: 600 15px/1.3 var(--jg-font) !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu .list-item-content__extra-actions .button-vue {
	border-color: var(--jg-edge) !important;
	background: transparent !important;
}
html body #header#header#header:not(.header-guest) #header-menu-user-menu #logout .list-item-content__name {
	color: var(--jg-ink-2) !important;
}

/* ==========================================================================
   5. APPS LAUNCHER (jocor_launcher) — same panel, left side
   ========================================================================== */
html body .jl-panel.jl-panel {
	inset-block-start: calc(var(--jg-bar-h) + var(--jg-pop-gap)) !important;
	inset-inline-start: max(8px, env(safe-area-inset-left, 0px)) !important;
	inline-size: min(var(--jg-pop-w), calc(100vw - 16px)) !important;
	max-block-size: calc(100dvh - var(--jg-bar-h) - 24px) !important;
	padding: 6px 6px 8px !important;
	z-index: 4000 !important;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(150, 180, 255, .28) transparent;
	--jl-edge: var(--jg-edge);
	--jl-rim: transparent;
	--jl-raised: transparent;
}
html body .jl-panel.jl-panel .jl-head {
	margin: 0 0 2px !important;
	padding-inline-end: 4px !important;
}
html body .jl-panel.jl-panel .jl-head__edit {
	min-block-size: 32px !important;
	padding-inline: 12px !important;
	font: 500 13px/1 var(--jg-font) !important;
}
html body .jl-panel.jl-panel .jl-head__edit.jl-is-on {
	background: var(--jg-blue) !important;
	border-color: var(--jg-blue) !important;
	color: var(--jg-void) !important;
}
html body .jl-panel.jl-panel .jl-pinned {
	margin: 0 0 6px !important;
	padding: 0 0 6px !important;
	gap: 4px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--jg-edge) !important;
	border-radius: 0 !important;
	background: transparent !important;
}
html body .jl-panel.jl-panel .jl-grid,
html body .jl-panel.jl-panel .jl-pool {
	gap: 4px !important;
}
html body .jl-panel.jl-panel :is(.jl-tile, .jl-pool__item) {
	gap: 8px !important;
	padding: 12px 4px 10px !important;
	border: 0 !important;
	border-radius: var(--jg-radius-s) !important;
	background: transparent !important;
	color: var(--jg-ink) !important;
	transition: background-color var(--jg-fast) var(--jg-ease) !important;
}
html body .jl-panel.jl-panel .jl-pool__item {
	box-shadow: inset 0 0 0 1px var(--jg-edge) !important;
}
html body .jl-panel.jl-panel :is(.jl-tile, .jl-pool__item):hover {
	background: rgba(150, 180, 255, .08) !important;
}
html body .jl-panel.jl-panel .jl-tile[aria-current="page"],
html body .jl-panel.jl-panel .jl-tile.jg-current {
	background: rgba(77, 141, 255, .12) !important;
	box-shadow: inset 0 0 0 1px rgba(77, 141, 255, .35) !important;
}
html body .jl-panel.jl-panel :is(.jl-tile__icon, .jl-pool__item img):not(.jl-tile__icon--letter) {
	width: 24px !important;
	height: 24px !important;
	filter: brightness(0) invert(.92) !important;
}
html body .jl-panel.jl-panel .jl-pinned .jl-tile__icon:not(.jl-tile__icon--letter) {
	width: 28px !important;
	height: 28px !important;
}
html body .jl-panel.jl-panel .jl-tile__icon--letter {
	width: 24px !important;
	height: 24px !important;
	background: var(--jg-blue-deep) !important;
	color: var(--jg-ink) !important;
	box-shadow: inset 0 0 0 1px var(--jg-edge) !important;
}
html body .jl-panel.jl-panel .jl-tile__label {
	font: 450 12.5px/1.25 var(--jg-font) !important;
	color: var(--jg-ink) !important;
}
html body .jl-panel.jl-panel :is(.jl-hint, .jl-sub) {
	padding: 0 10px !important;
	font: 400 13px/1.45 var(--jg-font) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--jg-ink-2) !important;
}
html body .jl-panel.jl-panel .jl-slot {
	border-color: var(--jg-edge) !important;
	border-radius: var(--jg-radius-s) !important;
	color: var(--jg-ink-2) !important;
}
html body .jl-panel.jl-panel .jl-foot {
	margin: 6px 0 0 !important;
	padding: 6px 0 0 !important;
	border-top: 1px solid var(--jg-edge) !important;
}
html body .jl-panel.jl-panel .jl-foot__link {
	display: flex !important;
	align-items: center !important;
	min-height: 36px !important;
	padding: 0 10px !important;
	border-radius: var(--jg-radius-s) !important;
	font: 500 13px/1 var(--jg-font) !important;
	color: var(--jg-ink-2) !important;
	text-decoration: none !important;
}
html body .jl-panel.jl-panel .jl-foot__link:hover {
	background: rgba(150, 180, 255, .08) !important;
	color: var(--jg-ink) !important;
}
html body .jl-panel.jl-panel .jl-over {
	outline-color: rgba(77, 141, 255, .6) !important;
}
html body .jl-panel.jl-panel .jl-drop-before {
	box-shadow: inset 3px 0 0 var(--jg-blue) !important;
}
html body .jl-ghost.jl-ghost {
	background: var(--jg-glass-hi) !important;
	border: 1px solid rgba(77, 141, 255, .45) !important;
	border-radius: var(--jg-radius-s) !important;
}

/* ==========================================================================
   6. HIDDEN APPS — Flix, Play and Library open only from the dashboard.
   Launcher tiles carry data-id; NC's own menu entries carry the href (the
   popover is teleported to <body>, so no ancestor scope). header.js removes
   the launcher's "Add an app" entries, which carry neither.
   ========================================================================== */
.jl-tile:is([data-id="flix"], [data-id="jocor_cartridge"], [data-id="jocor_library"]),
.app-menu-entry:is([data-app-id="flix"], [data-app-id="jocor_cartridge"], [data-app-id="jocor_library"]),
:is(.app-item, .app-menu-entry__link, .app-menu-icon, .app-menu a):is([href*="/apps/flix/"], [href*="/apps/jocor_cartridge/"], [href*="/apps/jocor_library/"]),
li:has(> :is(.app-item, a):is([href*="/apps/flix/"], [href*="/apps/jocor_cartridge/"], [href*="/apps/jocor_library/"])):is(.app-menu-entry, .app-menu-popover-entry, [class*="app-menu"]),
.jl-pool__item.jg-hidden-app {
	display: none !important;
}

/* ==========================================================================
   7. UNIFIED SEARCH DIALOG — the same panel, a size up
   ========================================================================== */
html body #unified-search.modal-mask {
	background: rgba(2, 3, 8, .55) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}
html body #unified-search .modal-container {
	width: min(640px, calc(100vw - 32px)) !important;
	max-width: none !important;
	top: 72px !important;
	max-height: calc(100dvh - 104px) !important;
	vertical-align: top !important;
}
html body #unified-search .modal-wrapper--normal {
	align-items: flex-start !important;
}
html body #unified-search .modal-container__content,
html body #unified-search .dialog,
html body #unified-search .dialog__wrapper,
html body #unified-search .dialog__content,
html body #unified-search .unified-search-modal__header,
html body #unified-search .unified-search-modal__results {
	background: transparent !important;
	color: var(--jg-ink) !important;
}
html body #unified-search .dialog__name {
	padding: 14px 52px 6px 18px !important;
}
html body #unified-search .unified-search-modal__header {
	padding: 4px 12px 10px !important;
	border-bottom: 1px solid var(--jg-edge) !important;
}
html body #unified-search .unified-search-modal__filters {
	gap: 6px !important;
	margin-top: 8px !important;
}
html body #unified-search .unified-search-modal__filters .button-vue {
	min-height: 32px !important;
	font: 500 13px/1 var(--jg-font) !important;
}
html body #unified-search .unified-search-modal__filters .button-vue * {
	color: var(--jg-ink) !important;
}
html body #unified-search .unified-search-modal__results {
	padding: 6px !important;
}
html body #unified-search .unified-search-modal__results :is(h3, .results-title) {
	margin: 10px 10px 4px !important;
	font: 600 13px/1.3 var(--jg-font) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--jg-ink-2) !important;
}
html body #unified-search .modal-container__close {
	top: 8px !important;
	right: 8px !important;
	color: var(--jg-ink) !important;
	background: transparent !important;
}
html body #unified-search .modal-container__close:hover {
	background: rgba(150, 180, 255, .08) !important;
}

/* ==========================================================================
   8. PHONE AND SMALL TABLET
   ========================================================================== */
@media (max-width: 720px) {
	html body #header#header#header:not(.header-guest) .header-start {
		padding-inline-start: max(6px, env(safe-area-inset-left, 0px)) !important;
		gap: 0 !important;
	}
	html body #header#header#header:not(.header-guest) .header-end {
		padding-inline-end: max(6px, env(safe-area-inset-right, 0px)) !important;
		gap: 0 !important;
	}
	html body #header#header#header:not(.header-guest) #nextcloud {
		margin-inline-end: 0 !important;
	}
	html body #header#header#header:not(.header-guest) #nextcloud .logo {
		width: 30px !important;
		height: 30px !important;
		max-width: 30px !important;
		max-height: 30px !important;
	}
	/* The late style in Application.php parks a 12-18px margin on the user
	   menu and the header on phones; this bar handles its own edge. */
	html body #header#header#header:not(.header-guest) #user-menu {
		width: auto !important;
		margin: 0 !important;
	}
}

/* Phones: every pop-up becomes a bottom sheet — full width, thumb-reachable,
   the bar stays visible above it. */
@media (max-width: 600px) {
	html body #header#header#header:not(.header-guest) .header-menu__wrapper,
	html body .jl-panel.jl-panel {
		top: auto !important;
		inset-block-start: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		inset-inline: 0 !important;
		inline-size: auto !important;
		width: auto !important;
		max-width: none !important;
		max-height: min(78dvh, calc(100dvh - var(--jg-bar-h) - 12px)) !important;
		max-block-size: min(78dvh, calc(100dvh - var(--jg-bar-h) - 12px)) !important;
		padding: 20px 8px max(12px, env(safe-area-inset-bottom, 0px)) !important;
		border-width: 1px 0 0 !important;
		border-radius: var(--jg-radius) var(--jg-radius) 0 0 !important;
		transform-origin: bottom center;
	}
	/* The grabber: says "sheet", not a control (tap outside or Esc closes). */
	html body #header#header#header:not(.header-guest) .header-menu__wrapper::before,
	html body .jl-panel.jl-panel::before {
		content: "" !important;
		position: absolute !important;
		top: 8px !important;
		left: 50% !important;
		width: 36px !important;
		height: 4px !important;
		margin-left: -18px !important;
		border-radius: 2px !important;
		background: rgba(150, 180, 255, .28) !important;
	}
	html body .jl-panel.jl-panel :is(.jl-tile, .jl-pool__item) {
		padding: 14px 4px 12px !important;
	}
	html body .jl-panel.jl-panel .jl-grid .jl-tile {
		background: transparent !important;
		border: 0 !important;
	}
	html body .jl-panel.jl-panel .jl-head__edit {
		min-block-size: 40px !important;
	}
	html body #header#header#header:not(.header-guest) #header-menu-user-menu .list-item,
	html body #header#header#header:not(.header-guest) #header-menu-contactsmenu .contact {
		min-height: 48px !important;
	}
	/* The dim behind a sheet (visual only; the menus close on outside tap). */
	html body.jg-pop-open::after {
		content: "";
		position: fixed;
		inset: var(--jg-bar-h) 0 0 0;
		z-index: 99;
		background: rgba(2, 3, 8, .5);
		pointer-events: none;
		animation: jg-fade var(--jg-med) var(--jg-ease) both;
	}
	/* Search: NC goes full screen on phones already; keep the glass edge-to-edge. */
	html body #unified-search .modal-container {
		width: 100vw !important;
		top: 0 !important;
		max-height: 100dvh !important;
		height: 100dvh !important;
		border-radius: 0 !important;
		border-width: 0 !important;
	}
}

/* ==========================================================================
   9. MOTION — one short rise on open; reduced motion gets a plain fade.
   ========================================================================== */
@keyframes jg-pop-in {
	from { opacity: 0; transform: translateY(-6px) scale(.985); }
	to { opacity: 1; transform: none; }
}
@keyframes jg-sheet-in {
	from { transform: translateY(24px); opacity: .4; }
	to { transform: none; opacity: 1; }
}
@keyframes jg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
html body #header#header#header:not(.header-guest) .header-menu__wrapper:not([style*="display: none"]),
html body .jl-panel.jl-panel.jl-open {
	animation: jg-pop-in var(--jg-med) var(--jg-ease) both;
}
@media (max-width: 600px) {
	html body #header#header#header:not(.header-guest) .header-menu__wrapper:not([style*="display: none"]),
	html body .jl-panel.jl-panel.jl-open {
		animation-name: jg-sheet-in;
	}
}
@media (prefers-reduced-motion: reduce) {
	html body #header#header#header:not(.header-guest) .header-menu__wrapper:not([style*="display: none"]),
	html body .jl-panel.jl-panel.jl-open,
	html body.jg-pop-open::after {
		animation: jg-fade var(--jg-fast) linear both !important;
	}
	html body #header#header#header:not(.header-guest) .jg-hbtn,
	html body #header#header#header:not(.header-guest) .jg-hbtn::after,
	html body #header#header#header:not(.header-guest) .jg-hbtn *,
	html body .jl-panel.jl-panel * {
		transition-duration: 1ms !important;
	}
	html body #header#header#header:not(.header-guest) .jg-hbtn::after {
		transform: none !important;
	}
}

/* Search as an icon (narrow screens, tagged by header.js). */
html body #header#header#header:not(.header-guest) .unified-search-input__button.jg-hbtn .unified-search-input__label {
	display: none !important;
}
html body #header#header#header:not(.header-guest) .unified-search-input__button.jg-hbtn .unified-search-input__icon {
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
}
/* Below 1024px NC still centres its (now icon-only) search in the bar; put
   it in the row with the other icons instead. Same breakpoint as header.js. */
@media (max-width: 1023px) {
	html body #header#header#header:not(.header-guest) .unified-search-menu .unified-search-input {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	html body #header#header#header:not(.header-guest) .unified-search-menu {
		width: auto !important;
		min-width: 40px !important;
	}
}