/* ==========================================================================
   Overlay — Help panel + mobile menu (shared backdrop/panel base)
   ========================================================================== */

/* Full-screen backdrop */
.ac-overlay-backdrop {
	position:   fixed;
	inset:      0;
	z-index:    var(--z-overlay);
	background: rgba(0, 47, 134, 0.55);
	backdrop-filter: blur(2px);
	opacity:    0;
	visibility: hidden;
	transition:
		opacity     var(--ac-duration-medium) var(--ac-ease-standard),
		visibility  0s var(--ac-duration-medium);
}

.ac-overlay-backdrop.is-open {
	opacity:    1;
	visibility: visible;
	transition:
		opacity    var(--ac-duration-medium) var(--ac-ease-standard),
		visibility 0s;
}

/* Slide-out panel — left side */
.ac-panel {
	position:        fixed;
	top:             0;
	left:            0;
	bottom:          0;
	z-index:         var(--z-modal);
	width:           min(480px, 100vw);
	background:      var(--ac-color-white);
	box-shadow:      var(--ac-shadow-lg);
	display:         flex;
	flex-direction:  column;
	overflow-y:      auto;
	overscroll-behavior: contain;
	transform:       translateX(-100%);
	visibility:      hidden;   /* removes from paint; inert (JS) removes from tab order */
	transition:
		transform   var(--ac-duration-medium) var(--ac-ease-decelerate),
		visibility  0s var(--ac-duration-medium);
}

.ac-panel.is-open {
	transform:  translateX(0);
	visibility: visible;
	transition:
		transform  var(--ac-duration-medium) var(--ac-ease-decelerate),
		visibility 0s;
}

/* Full-viewport variant (Help panel) */
.ac-panel--full {
	width: 100vw;
}

/* Panel header */
.ac-panel__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var(--ac-space-6) var(--ac-space-8);
	border-bottom:   1px solid var(--ac-color-border);
	background:      var(--ac-color-primary);
	color:           var(--ac-color-white);
	flex-shrink:     0;
}

.ac-panel__title {
	font-size:   var(--ac-font-size-xl);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-white);
	margin:      0;
}

.ac-panel__close {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      transparent;
	border:          2px solid rgba(255,255,255,0.4);
	border-radius:   var(--ac-radius-pill);
	color:           var(--ac-color-white);
	font-size:       1.125rem;
	cursor:          pointer;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-panel__close:hover,
.ac-panel__close:focus-visible {
	background-color: rgba(255, 255, 255, 0.15);
	border-color:     rgba(255, 255, 255, 0.8);
}

.ac-panel__close:focus-visible {
	outline:        3px solid var(--ac-color-white);
	outline-offset: 2px;
}

/* Panel body */
.ac-panel__body {
	flex:           1;
	padding:        var(--ac-space-6) var(--ac-space-6) var(--ac-space-8);
	display:        flex;
	flex-direction: column;
	overflow-y:     auto;
	overflow-x:     hidden;
	min-height:     0;
}

/* ── Mobile menu panel: drilldown scrolls, actions stay pinned ────────── */

/* No padding/scroll on the body itself — children manage their own */
#ac-mobile-panel .ac-panel__body {
	padding:    0;
	overflow:   hidden;
}

/* Drilldown fills available space and scrolls internally */
#ac-mobile-panel .ac-drilldown {
	flex:       1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding:    var(--ac-space-6);
}

/* Actions row: pinned to the bottom, never covered */
.ac-mobile-actions {
	flex-shrink:  0;
	display:      flex;
	flex-direction: column;
	gap:          var(--ac-space-3);
	padding:      var(--ac-space-4) var(--ac-space-6) var(--ac-space-6);
	border-top:   1px solid var(--ac-color-border);
	background:   var(--ac-color-white);
}

/* Hide actions when user drills into any sub-panel (not root panel 0) */
#ac-mobile-panel:has(.ac-dd-panel:not([data-panel="0"]).is-active) .ac-mobile-actions {
	display: none;
}