/* BARREL BROZ — Light / Dark toggle in the yellow header (website Dark Mode, Release 1).
   Printed only for signed-in visitors who may use Dark Mode (bb-site-dark-mode.php); guests never load this file.
   Visual reuse of The Cellar's Newsletter switch: a 46×26 rectangle, 2px black border, square indicator, no symbols,
   the LIGHT / DARK label centred above it. Light = white track, black square on the left; Dark = black track, yellow
   square on the right. The header itself stays yellow in both themes.
   One placement is visible per width:  ≥1200 px beside Search · 1025–1199 px above Search · mobile header before
   Search · desktop header at 922–1024 px none (that band already overflows today; left as it is).
   Everything sits in the cascade layer "bbsd-toggle", which the Dark stylesheet declares first, and every declaration
   is !important: so neither the site's own button / link styles nor the Dark rules can ever restyle the toggle. */
@layer bbsd-toggle {
	.bbsd-slot { display: none !important; align-items: center !important; justify-content: center !important; }
	.bbsd-unit { display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; background: none !important; } /* 7 px clears the 3 px focus ring + 3 px offset */
	.bbsd-lbl { display: block !important; margin: 0 !important; font: 700 9px/11px 'Space Mono', ui-monospace, monospace !important; letter-spacing: .1em !important; padding: 0 0 0 .1em !important; text-transform: uppercase !important; color: #0a0a0a !important; background: none !important; white-space: nowrap !important; pointer-events: none !important; user-select: none !important; }

	.bbsd-unit > button.bbsd-switch {
		--w: 46px; --h: 26px; --s: 16px; --m: 3px; --b: 2px;
		position: relative !important; display: inline-block !important; flex: 0 0 auto !important; box-sizing: border-box !important;
		width: var(--w) !important; height: var(--h) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important;
		margin: 0 !important; padding: 0 !important; border: var(--b) solid #0a0a0a !important; border-radius: 0 !important; box-shadow: none !important;
		background: #ffffff !important; color: #0a0a0a !important; overflow: hidden !important; cursor: pointer !important; line-height: 0 !important; font-size: 0 !important;
		transform: none !important; transition: background-color .15s ease !important; -webkit-tap-highlight-color: transparent !important; outline: none !important;
	}
	.bbsd-switch .bbsd-ind { position: absolute !important; top: var(--m) !important; left: var(--m) !important; width: var(--s) !important; height: var(--s) !important; margin: 0 !important; background: #0a0a0a !important; border: 0 !important; transition: left .15s ease, background-color .15s ease !important; }
	.bbsd-unit > button.bbsd-switch[aria-checked="true"] { background: #0a0a0a !important; }
	.bbsd-switch[aria-checked="true"] .bbsd-ind { left: calc(var(--w) - var(--b) * 2 - var(--m) - var(--s)) !important; background: #ffd203 !important; }
	@media (hover: hover) {
		.bbsd-unit > button.bbsd-switch[aria-checked="false"]:hover { background: #f0f0ea !important; }
		.bbsd-unit > button.bbsd-switch[aria-checked="true"]:hover { background: #2a2a2a !important; }
	}
	.bbsd-unit > button.bbsd-switch:focus-visible { outline: 3px solid #0a0a0a !important; outline-offset: 3px !important; }
	.bbsd-unit > button.bbsd-switch:active { transform: translateY(1px) !important; }
	.bbsd-unit > button.bbsd-switch[aria-disabled="true"] { cursor: not-allowed !important; }
	.bbsd-unit > button.bbsd-switch[aria-disabled="true"]:active { transform: none !important; }
	@media (prefers-reduced-motion: reduce) { .bbsd-switch, .bbsd-switch * { transition: none !important; } }

	/* desktop, 1200 px and wider: between LISTEN and Search */
	.bbsd-inline { margin: 0 10px 0 2px !important; }
	@media (min-width: 1200px) { #ast-desktop-header .bbsd-inline { display: flex !important; } }

	/* desktop, 1025–1199 px: above Search, the label + switch + Search one vertically centred group in the 124 px bar.
	   Group height = label 11 + gap 7 + switch 26 + 8 + Search glyph 17.5 = 69.5 → top 27.25. The whole Astra Search
	   wrapper moves down (not only the icon), so its invisible box never covers the toggle. */
	.bbsd-stack { position: absolute !important; left: calc(50% - .5px) !important; top: -21.25px !important; transform: translateX(-50%) !important; z-index: 5 !important; margin: 0 !important; }
	@media (min-width: 1025px) and (max-width: 1199px) {
		#ast-desktop-header .bbsd-stack { display: flex !important; }
		#ast-desktop-header .ast-header-search.bbsd-search { position: relative !important; }
		#ast-desktop-header .ast-header-search.bbsd-search .ast-search-menu-icon { transform: translateY(26.15px) !important; }
	}

	/* mobile header: logo … toggle → Search → menu; the 44 px slot is the touch area */
	#ast-mobile-header .bbsd-mob { display: flex !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 2px !important; box-sizing: border-box !important; cursor: pointer !important; }

	/* the short "couldn't save" / "locked" message */
	.bbsd-msg { position: fixed !important; left: 50% !important; bottom: 24px !important; transform: translateX(-50%) !important; z-index: 99999 !important; max-width: calc(100vw - 32px) !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 14px !important; background: #0a0a0a !important; color: #f7f7f2 !important; border: 2px solid #ffd203 !important; font: 700 12px/16px 'Space Mono', ui-monospace, monospace !important; letter-spacing: .04em !important; text-align: center !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease !important; }
	.bbsd-msg.bbsd-on { opacity: 1 !important; }
}