/* =====================================================
   My Membership — Account UI styles
   Namespaced with .wlm- to avoid clashing with theme CSS.
===================================================== */

.wlm-account-area {
	display: inline-flex;
	align-items: center;
	position: relative;
}

/* ---- Login button ----
   Also carries the theme's own .topnav-cta-btn class (added in PHP) so
   it picks up the exact same font-size, line-height, font-family, and
   vertical padding as the theme's other menu-bar buttons — including
   the Customizer "Button Vertical Padding" setting — automatically and
   permanently in sync, rather than us guessing/duplicating those values.
   Only the properties that make it "ours" (colour, shape, cursor) are
   set here; sizing/typography intentionally left to .topnav-cta-btn. */
.wlm-login-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff551;
	color: #1a1a1a;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}
.wlm-login-btn:hover { opacity: .88; }

/* Space it out a bit more from the dark-mode toggle that sits right
   before it in the topnav flex row. */
.wlm-login-btn,
.wlm-account-area {
	margin-left: 12px;
}
.wlm-login-btn-mobile,
.wlm-account-area-mobile {
	margin-left: 8px;
}

/* The theme's topnav CSS isolation rule ( #topnav-bar a,
   .topnav-mobile-wrap a { padding: 0; ... } ) uses an ID selector, which
   beats class-based rules on specificity alone — that's what strips the
   button's horizontal padding once it's rendered inside the topnav.
   (Vertical padding survives on its own: the theme's Customizer output
   for .topnav-cta-btn sets padding-top/bottom with !important, which
   beats the ID selector regardless of specificity.) Left/right padding
   re-declared here, scoped to the same containers, so it wins too. */
#topnav-bar .wlm-login-btn,
.topnav-mobile-wrap .wlm-login-btn {
	padding-left: 16px;
	padding-right: 16px;
}
#topnav-bar .wlm-login-btn-mobile,
.topnav-mobile-wrap .wlm-login-btn-mobile {
	padding-left: 12px;
	padding-right: 12px;
}

/* Same #topnav-bar/.topnav-mobile-wrap padding-stripping rule (see
   comment above) also reaches the separate "Peek Pro" plugin's shared
   "Get Premium" button (.peekpro-get-premium-btn, styled by its own
   assets/peek-pro.css) wherever it's printed inside the Menu Panel or
   Notifications panel — both render through the wlcustom_topnav_account_area
   hook (see wlm_render_account_area() / wlm_render_notification_bell()
   below and in includes/notifications.php), so both panels are DOM
   descendants of #topnav-bar even though they render as fixed-position
   overlays on screen. Sticky Table of Contents' own copy of this same
   button isn't affected, since #stoc-root is printed in wp_footer,
   outside #topnav-bar entirely — which is why only these two panels
   showed the shrunken button.
   Re-declares Peek Pro's own default button look (peek-pro.css) here,
   scoped the same way .wlm-login-btn is above (an ID + a class beats
   the theme's ID + tag selector without needing !important), so the
   button matches the TOC's in all three places. If Peek Pro's own
   defaults are changed later (Peek Pro -> Settings), update peek-pro.css
   and this block together to keep them in sync. */
#topnav-bar .peekpro-get-premium-btn,
.topnav-mobile-wrap .peekpro-get-premium-btn {
	display: inline-block;
	padding: 10px 22px;
	background: #fff551;
	color: #333333;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
}

/* ---- Avatar button ----
   Colors come from CSS custom properties so they can be overridden
   per-site from Settings -> Account Panel -> Profile Icon Colors
   (see wlm_render_avatar_color_styles() in account-ui.php). The
   hardcoded values here are just the fallback if that admin setting
   was never touched. */
.wlm-avatar-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wlm-avatar-bg, #006666);
	border: 2px solid var(--wlm-avatar-border, #fff551);
	color: var(--wlm-avatar-text, #fff);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex: 0 0 auto;
}
.wlm-avatar-initials {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	color: var(--wlm-avatar-text, #fff);
	text-transform: uppercase;
}
/* ---- Floating profile orb ----
   Shown only when the user has set "Bottom Menu Bar" to Off (see
   wlm_render_floating_orb() in account-ui.php), so there's still a
   one-tap way to reach the account panel. */
.wlm-floating-orb {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99999;
}
.wlm-floating-orb-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wlm-avatar-bg, #006666);
	border: 2px solid var(--wlm-avatar-border, #fff551);
	color: var(--wlm-avatar-text, #fff);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.wlm-floating-orb-btn:hover { opacity: .92; }
.wlm-floating-orb-btn .wlm-avatar-initials {
	font-size: 15px;
}
@media (max-width: 1023px) {
	.wlm-floating-orb { right: 12px; bottom: 12px; }
}

/* ---- Clear the Sticky TOC plugin's mobile bar ----
   When the "Sticky Table of Contents" plugin (sticky-toc) is showing
   its full-width mobile bar for the post being viewed,
   wlm_render_floating_orb() (account-ui.php) adds the modifier class
   below so the orb sits above the bar instead of on top of it.
   60px = the TOC bar's fixed 48px height (public/css/sticky-toc.css,
   .stoc-mob-bar) + a 12px gap, matching that bar's own flush-to-bottom
   position once wlm-bottomnav-hidden also forces sticky-toc's
   --mob-bottom to 0 (see that plugin's CSS). <=1199px matches
   sticky-toc's own mobile breakpoint — above that width sticky-toc
   shows its desktop side panel instead, which never sits at the
   bottom, so no shift is needed there. Declared after the block above
   so it wins at every width in this range, including <=1023px.
   Purely additive: if sticky-toc isn't installed/active this modifier
   class is never added and the orb renders at its normal position. */
@media (max-width: 1199px) {
	.wlm-floating-orb-above-toc { bottom: 60px; }
}

/* ---- Dropdown / bottom-sheet panel ---- */
.wlm-account-panel {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
}
.wlm-account-panel.is-open { display: block; }

.wlm-account-panel-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.4);
}

.wlm-account-panel-inner {
	position: absolute;
	background: #fff;
	color: #222;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,.25);
	/* 425px = 340px + 25%, per spec. */
	width: min(425px, 92vw);
	max-height: 90vh;
	/* Scrolling stays enabled (content can still be reached if it ever
	   exceeds max-height) — only the visible scrollbar itself is
	   hidden, per spec, via the scrollbar-width/-ms-overflow-style/
	   ::-webkit-scrollbar rules just below. */
	overflow-y: auto;
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* old Edge / IE */
	padding: 16px;
	/* Without this, "width" only sets the *content* box and the 16px
	   left/right padding is added on top of it. On mobile (below) that
	   pushes the panel's true rendered width 32px past the value we
	   set "width" to — with left+right both pinned, the extra 32px has
	   nowhere to go but off the right edge of the screen, taking
	   whatever sits at the far right of each row with it (the "XXL"
	   text-size label, the toggle switches, the tristate dropdowns —
	   anything flush against the panel's right edge). box-sizing:
	   border-box makes "width" include the padding instead, so the
	   rendered panel is never wider than the value we actually set. */
	box-sizing: border-box;

	/* Desktop default: anchored under top-right avatar */
	top: 66px;
	right: 16px;
}

.wlm-account-panel-inner::-webkit-scrollbar {
	display: none; /* Chrome / Safari / Edge (Chromium) */
}

/* Mobile: anchored top-right, same corner as the desktop dropdown
   (not centered on the screen) — just at the smaller 70% width /
   60% height size. */
@media (max-width: 1023px) {
	.wlm-account-panel-inner {
		top: 66px;
		right: 16px;
		left: auto;
		bottom: auto;
		transform: none;
		width: 70%;
		max-height: 60vh;
		border-radius: 16px;
	}
}

.wlm-panel-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #eee;
}
.wlm-panel-header-text { flex: 1 1 auto; min-width: 0; }
.wlm-panel-name {
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wlm-panel-status {
	font-size: 13px;
	color: #555;
	margin-top: 2px;
}
.wlm-panel-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: #888;
	padding: 6px;
	line-height: 1;
}

/* Mobile only: float the close button in the panel's top-right corner
   instead of leaving it inline in the header row (desktop is
   untouched — it keeps the inline button placed above). */
@media (max-width: 1023px) {
	.wlm-panel-header {
		padding-right: 30px; /* keep name/status text clear of the floating button */
	}
	.wlm-panel-close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 28px;
		height: 28px;
		background: #f2f2f2;
		border-radius: 50%;
		font-size: 13px;
		color: #555;
		padding: 0;
	}
}

.wlm-panel-section {
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}
.wlm-panel-section:last-child { border-bottom: none; }
/* "Your Read Later" now sits directly above "Sticky Note" (see
   account-ui.php) — drop just this one divider so the two buttons
   sit flush together; every other section divider is untouched. */
/* "Your Read Later" now sits directly above "Sticky Note" (see
   account-ui.php) with no divider between them. Zeroing out its own
   top/bottom padding means the surrounding gaps (header line ->
   Read Later, Read Later -> Sticky Note) come only from the single
   12px padding already on the header/next section — matching the
   existing 12px gap below Sticky Note, instead of doubling to 24px. */
.wlm-panel-readlater-section {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: none;
}
/* "Sticky Note" sits directly above "Save My Spot" — same treatment:
   drop this section's own bottom padding/divider so the only gap
   between them is .wlm-panel-reading-section's unchanged 12px top
   padding, keeping every button-to-button gap in this stack at a
   consistent 12px (Read Later -> Sticky Note -> Save My Spot ->
   Saved Reading Spots, the last pair spaced by
   .wlm-panel-reading-save-btn's own 12px margin-bottom). */
.wlm-panel-sticky-section {
	padding-bottom: 0;
	border-bottom: none;
}
/* "Saved Reading Spots" now sits directly above "See Highlights" (see
   includes/highlights.php) — same treatment: drop this section's own
   bottom padding/divider so the only gap between them comes from
   .wlm-panel-highlights-section's own top padding, keeping every
   button-to-button gap in this stack a consistent 12px (Read Later ->
   Sticky Note -> Save My Spot -> Saved Reading Spots -> See
   Highlights, the "Save My Spot" -> "Saved Reading Spots" pair spaced
   by .wlm-panel-reading-save-btn's own 12px margin-bottom).
   .wlm-panel-highlights-section itself needs no override: it's the
   new last item in the stack, so it keeps the base .wlm-panel-section
   padding/divider to separate it from "Article Text Size" below. */
.wlm-panel-reading-section {
	padding-bottom: 0;
	border-bottom: none;
}
.wlm-panel-section-title {
	font-size: 14px;
	font-weight: 600;
	color: #222;
	margin-bottom: 8px;
}

/* No divider between Article Text Size / Article Font / Article
   Background / Article Layout — they read as one continuous block.
   Same for the two tristate button-group sections (Bottom Menu Bar,
   Top computer menu bar sticky) that follow Article Layout: only the
   last one keeps its bottom divider, so the block above still reads
   as one continuous group while the section after it (Links/Logout)
   stays visually separated. */
.wlm-font-size-section,
.wlm-font-family-section,
.wlm-bg-section,
.wlm-align-section {
	border-bottom: none;
}
.wlm-tristate-section:not(:last-of-type) {
	border-bottom: none;
}

/* Text size slider — 4 discrete stops (S/M/L/XL), percentages
   configurable at Settings -> Account Panel. */
.wlm-font-size-slider-wrap {
	padding: 4px 2px 0;
}
.wlm-font-size-slider {
	width: 100%;
	margin: 0;
	accent-color: #006666;
	cursor: pointer;
}
.wlm-font-size-slider-labels {
	position: relative;
	height: 16px;
	margin-top: 4px;
	padding: 0 1px;
}
/* Positioned by fraction of the slider's travel (0/25/50/75/100%) to
   match the 5 stops of the range input above, not by each label's own
   text width. The old `display:flex; justify-content:space-between`
   layout placed every label according to how much room its neighbours'
   text took up, so only the first (S) and last (XXL) labels — pinned
   to the row's own edges regardless of width — ever lined up with the
   thumb; M, L, and XL drifted depending on the width of the labels
   around them. Each label below is anchored at its exact stop
   percentage and shifted left by that same percentage of its own
   width (0% at the left stop sliding up to 100% at the right stop),
   the same interpolation the browser itself uses to keep a slider
   thumb's edges from overflowing the track — so every label's center
   sits on its stop consistently, not just the two end ones. */
.wlm-font-size-slider-labels span {
	position: absolute;
	top: 0;
	font-size: 12px;
	font-weight: 600;
	color: #999;
	white-space: nowrap;
}
.wlm-font-size-slider-labels span:nth-child(1) { left: 0%; transform: translateX(0); }
.wlm-font-size-slider-labels span:nth-child(2) { left: 25%; transform: translateX(-25%); }
.wlm-font-size-slider-labels span:nth-child(3) { left: 50%; transform: translateX(-50%); }
.wlm-font-size-slider-labels span:nth-child(4) { left: 75%; transform: translateX(-75%); }
.wlm-font-size-slider-labels span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.wlm-font-size-slider-labels span.is-active {
	color: #006666;
}

/* Toggle rows — the boolean-type row is a <label> element (so its
   checkbox click target covers the row), which some themes bold by
   default; force it back to normal weight so it matches the
   tristate rows below, which use a <div> and aren't affected. */
.wlm-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}
.wlm-toggle-row-tristate { cursor: default; }

/* Label text — always a single line. Works together with the fixed,
   narrower dropdown width below (rather than the select's own
   intrinsic/auto width, which is what previously pushed rows like
   "Top computer menu bar sticky" onto two lines). */
.wlm-toggle-row > span {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Every dropdown next to a toggle row (Bottom Menu Bar, Top computer
   menu bar sticky) shares this one class, so sizing them here keeps
   both visually identical. */
.wlm-tristate-select {
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 5px;
	border: 1px solid #ddd;
	width: 110px;
	max-width: 110px;
	flex: 0 0 auto;
	box-sizing: border-box;
}
@media (max-width: 1023px) {
	.wlm-toggle-row { font-size: 13px; }
	.wlm-tristate-select {
		width: 98px;
		max-width: 98px;
		font-size: 11px;
		padding: 4px 4px;
	}
}

/* Article Font — each button previews in its own font-family. A single
   horizontally-scrolling row keeps this section at a fixed height no
   matter how many font options are added later (was wrapping to 2+
   rows). Buttons/JS/data attributes are unchanged — purely a layout
   change, still fully clickable/keyboard-focusable, just scrollable. */
.wlm-font-family-options {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 6px;
	padding-bottom: 6px;
	margin-bottom: -6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
}
.wlm-font-family-options::-webkit-scrollbar { height: 4px; }
.wlm-font-family-options::-webkit-scrollbar-track { background: transparent; }
.wlm-font-family-options::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.wlm-font-family-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 40px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 400;
	color: #333;
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
	scroll-snap-align: start;
}
.wlm-font-family-btn:hover { background: #eee; }
.wlm-font-family-btn.is-active {
	background: #006666;
	border-color: #006666;
	color: #fff;
}

/* Article Background — 3 colored boxes (White / Brown / Yellow) that
   are themselves the buttons, replacing the old dropdown. Colors are
   inline (style="background-color:...") from account-ui.php so the
   swatch always matches whatever wlmApplyReadingBgOverride() actually
   applies (see WLM_READING_BG_HEX in account.js) — nothing here needs
   updating if those hex values ever change. All three fills are pale
   enough that one dark label color works for all of them. */
.wlm-bg-options {
	display: flex;
	gap: 8px;
}
.wlm-bg-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	cursor: pointer;
	padding: 0;
}
.wlm-bg-btn:hover { border-color: #bbb; }
.wlm-bg-btn.is-active {
	border-color: #006666;
}
.wlm-bg-btn-label {
	font-size: 13px;
	font-weight: 400;
	color: #333;
}

/* Post Layout — left / center / right alignment for the post body. */
.wlm-align-options,
.wlm-tristate-options {
	display: flex;
	gap: 8px;
}
.wlm-align-btn,
.wlm-tristate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1 1 0;
	box-sizing: border-box;
	height: 40px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 400;
	color: #333;
	cursor: pointer;
}
.wlm-align-btn:hover,
.wlm-tristate-btn:hover { background: #eee; }
.wlm-align-btn.is-active,
.wlm-tristate-btn.is-active {
	background: #006666;
	border-color: #006666;
	color: #fff;
}

.wlm-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex: 0 0 auto;
}
.wlm-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}
.wlm-switch-track {
	position: absolute;
	inset: 0;
	background: #ccc;
	border-radius: 999px;
	transition: background .15s ease;
}
.wlm-switch-track::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 2px;
	top: 2px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
}
.wlm-switch input:checked + .wlm-switch-track {
	background: #006666;
}
.wlm-switch input:checked + .wlm-switch-track::before {
	transform: translateX(18px);
}

/* Account panel links (admin-configured menu) */
.wlm-panel-links-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wlm-panel-links-menu li { margin: 0; }
.wlm-panel-links-menu a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	color: #222;
	text-decoration: none;
}
.wlm-panel-links-menu a:hover { color: #006666; }

.wlm-panel-footer-note {
	margin-top: 10px;
	padding-top: 10px;
	font-size: 11px;
	color: #999;
	text-align: center;
}

.wlm-panel-logout {
	padding-top: 6px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.wlm-logout-link {
	display: inline-block;
	color: #b32d2e;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.wlm-logout-link:hover { color: #006666 !important; text-decoration: underline; }
.wlm-help-link {
	display: inline-block;
	color: #5c6b73;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.wlm-help-link:hover { color: #006666 !important; text-decoration: underline; }

/* ---- Login modal ---- */
.wlm-login-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100001;
	align-items: center;
	justify-content: center;
}
.wlm-login-modal.is-open { display: flex; }
.wlm-login-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
}
.wlm-login-modal-box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	width: min(360px, 92vw);
	padding: 22px;
	box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.wlm-login-modal-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	color: #222;
}
.wlm-login-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: #888;
}
.wlm-login-field {
	margin-bottom: 12px;
}
.wlm-login-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #333;
}
.wlm-login-field input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 16px;
	box-sizing: border-box;
}
.wlm-login-field input:focus,
.wlm-login-field input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.wlm-login-error {
	display: none;
	color: #b32d2e;
	font-size: 13px;
	margin-bottom: 10px;
}
.wlm-login-error.is-visible { display: block; }
.wlm-login-modal-box .wlm-login-field:last-of-type {
	margin-bottom: 18px; /* 50% more than the default 12px gap, so the Password field sits farther from Log In */
}
.wlm-login-submit {
	width: 100%;
	background: #006666;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 11px 0;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.wlm-login-submit:disabled { opacity: .6; cursor: default; }
.wlm-login-modal-footer {
	margin-top: 12px;
	text-align: center;
	font-size: 13px;
}
.wlm-login-modal-footer a { color: #006666; text-decoration: none; }
.wlm-login-modal-footer a:hover { text-decoration: underline; }

/* ---- "Get Premium Account" button — sits just under the "Forgot Your
   Password?" link in the login popup. ---- */
.wlm-get-premium-btn {
	display: block;
	width: 100%;
	margin-top: 12px;
	background: #fff551;
	color: #333333;
	border: none;
	border-radius: 6px;
	padding: 11px 0;
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
}
.wlm-get-premium-btn:hover { opacity: .88; }

/* ---- Full-page login (mysite.com/login) — shares field/button/error
   styles with the modal above (.wlm-login-field, .wlm-login-error,
   .wlm-login-submit) so both look identical. ---- */
.wlm-login-page {
	max-width: 420px;
	margin: 60px auto;
	padding: 0 20px;
}
.wlm-login-page-box {
	background: #fff;
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
	border: 1px solid #eee;
}
.wlm-login-page-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 18px;
	color: #222;
}
.wlm-login-page-error {
	color: #b32d2e;
	font-size: 13px;
	margin-bottom: 14px;
}
.wlm-login-page-footer {
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
}
.wlm-login-page-footer a { color: #006666; text-decoration: none; }
.wlm-login-page-footer a:hover { text-decoration: underline; }

/* ---- Applied preferences ----
   .entry-the-content is the theme's actual post/page content wrapper
   (confirmed in the theme's template-parts/content.php etc). Content
   inside it inherits this scaled font-size UNLESS the theme's own
   Customizer typography feature (include/typography-output.php)
   has printed a direct px font-size on specific child elements —
   see the wlm_typography_override_head_styles() PHP override for that. */
.entry-content,
.entry-the-content {
	font-size: calc(1em * var(--wlm-content-font-scale, 1));
}

/* Guard: if the theme's own hide-on-scroll bottomnav classes were left on
   an element while our body class says it should be hidden entirely. */
body.wlm-bottomnav-hidden #bottomnav-bar {
	display: none !important;
}

/* ---- Article Font override ----
   The theme's own include/typography-output.php forces Roboto onto
   these same selectors at wp_head priority 95, prefixed only with
   "body" (see that file). Prefixing every selector here with
   "body.wlm-logged-in" adds one extra class, which out-specifies the
   theme's plain "body ..." rules — no !important needed, and load
   order doesn't matter since specificity decides the tie. Only fires
   for logged-in users; 'default' leaves --wlm-content-font-family
   unset, which falls back to the theme's own Roboto stack below. */
body.wlm-logged-in .entry-content,
body.wlm-logged-in .entry-content p,
body.wlm-logged-in .entry-content li,
body.wlm-logged-in .entry-content h1,
body.wlm-logged-in .entry-content h2,
body.wlm-logged-in .entry-content h3,
body.wlm-logged-in .entry-content h4 {
	font-family: var(--wlm-content-font-family, "Roboto", sans-serif);
}

/* ---- Post Body Alignment ----
   Only meaningful on single posts/pages, where .hgrid.main-content-grid
   (the theme's single.php / page.php wrapper — confirmed against the
   theme's own templates) is centered by the theme's plain ".hgrid"
   rule (width:100%, max-width, margin-left/right:auto — see the
   theme's style.css). Shifting it fully left or right redistributes
   that same empty space to one side. 'center' is the theme's existing
   default, so no override is printed for it.

   IMPORTANT: this targets "body.singular", not "body.single"/"body.page".
   The theme's own hybrid_body_class_filter() (hybrid/inc/functions-
   context.php) runs on 'body_class' at priority 0 and completely
   replaces WordPress's default class list before any other plugin
   (including this one, which only hooks in at the normal priority)
   ever sees it — it never outputs "single" or "page" at all, only
   "singular", "singular-post", "singular-page", etc. A selector built
   around the stock WP class names silently never matches on this
   theme, which is why alignment previously had no visible effect
   despite every other part of the feature (button clicks, saved pref,
   body class add) working correctly. "singular" alone covers both
   posts and pages here, so one rule replaces the previous two.

   !important guards against the theme's own responsive/layout rules
   (e.g. the flex-wrap rule applied to .main-content-grid at >=970px)
   winning a tie on load order, since our stylesheet has no explicit
   dependency on the theme's style.css.

   FURTHER PUSH: margin-left:0 / margin-right:0 already puts .hgrid at
   the true edge of its own containing block (#main has no horizontal
   padding). Two things still eat into that edge, both from the theme's
   own grid system (style.css): (1) <main class="content ..."> always
   carries a "hgrid-span-N" class, and every "[class*='hgrid-span-']"
   element gets a fixed 15px left+right padding — reclaimed below on
   whichever side we're pushing toward; (2) the theme's own centering
   still leaves the box narrower than the viewport on wide screens.
   --wlm-align-push adds an extra nudge past the "flush" position on
   top of that, via transform (safe: it moves the whole rendered box,
   including the sidebar/content float layout inside it, without
   affecting document flow or causing overflow scrollbars the way an
   equivalent negative margin could). 48px is a reasonable starting
   point — tell me to dial it up or down and I'll adjust the value.
   Restricted to >=1024px (the theme's own "desktop" breakpoint, see
   header.php's anti-FOUC nav-switch styles and css/topnav.css) since
   alignment is meaningless on phone/tablet single-column layouts. */
@media (min-width: 1024px) {
	:root {
		--wlm-align-push: 48px;
	}
	body.singular.wlm-align-left .hgrid.main-content-grid {
		margin-left: 0 !important;
		margin-right: auto !important;
		transform: translateX(calc(-1 * var(--wlm-align-push)));
	}
	body.singular.wlm-align-left .hgrid.main-content-grid [class*="hgrid-span-"] {
		padding-left: 0 !important;
	}
	body.singular.wlm-align-right .hgrid.main-content-grid {
		margin-left: auto !important;
		margin-right: 0 !important;
		transform: translateX(var(--wlm-align-push));
	}
	body.singular.wlm-align-right .hgrid.main-content-grid [class*="hgrid-span-"] {
		padding-right: 0 !important;
	}
}

/* ---- Post Layout panel: mobile/tablet note ----
   The buttons stay visible and tappable below 1024px (so the saved
   preference still applies once the person switches to a laptop),
   but since the alignment CSS above is desktop-only, a short note
   explains why nothing visibly changes on phone/tablet. */
.wlm-align-mobile-note {
	display: none;
	margin: 6px 0 0;
	font-size: 12px;
	color: #767676;
}
@media (max-width: 1023px) {
	.wlm-align-mobile-note {
		display: block;
	}
}

/* ---- Reading Background (Brown / Light Yellow) ----
   Covers the whole post/page screen — the article text itself, AND
   the surrounding page (the gutters/edges beside it) — while leaving
   the rest of the site (home, archives, nav, footer) untouched.
   Independent of the theme's own Dark Mode. The theme's Dark Mode
   script (js/darkmode.js) recolors elements it touches via inline
   style="" attributes; per the CSS cascade, a stylesheet rule marked
   !important still overrides a non-important inline style regardless
   of load order, so every color rule below uses !important specifically
   to keep the chosen reading background legible even if a visitor also
   has Dark Mode switched on. The extra padding/radius rules don't need
   !important — they're new properties the theme never sets here.

   The `body.singular` rule immediately below is the base fix: any
   part of the page that has no background color of its own (the
   gutters left/right of the post, the space above/below it, etc.)
   simply shows whatever the <body> is colored, so recoloring body
   already fixes the areas around the post reported as "still white/
   still black". The theme also wraps the whole post+sidebar column
   in `#main.main`, which the theme's own stylesheet hardcodes to
   `background: #fff` — an opaque layer that sits on top of body and
   blocks its color, which is why body alone wasn't enough; the
   `#main.main` rules below override that directly. Any *other*
   nested wrapper that turns out to carry its own explicit white/black
   background (a template this hasn't been tested against, a future
   theme change, etc.) is caught at runtime by the "Reading background
   — whole-screen override" block in account.js, which walks up from
   the article through its ancestor wrappers and force-recolors
   anything left over — the same approach already used by the Page
   Background Color plugin. Scoped to body.singular so it never
   touches the homepage, category pages, etc. — only the actual
   post/page reading screen. */
body.singular.wlm-reading-bg-brown {
	background-color: #e9d9bd !important;
}
body.singular.wlm-reading-bg-yellow {
	background-color: #fdf6e0 !important;
}
body.singular.wlm-reading-bg-brown #main.main {
	background-color: #e9d9bd !important;
}
body.singular.wlm-reading-bg-yellow #main.main {
	background-color: #fdf6e0 !important;
}

/* Reading Background is a *post/page reading* feature — it must never
   reach the footer. The theme renders #sub-footer, #footer, and
   #post-footer as siblings of #main (outside the area above), and two
   of the three (#sub-footer, #post-footer) have no background color
   of their own in the theme's stylesheet, so without this they'd
   silently show through to whatever <body> is colored — invisible
   normally because it happens to match body's own default #f7f7f7,
   but visible as soon as body is recolored brown/yellow. These rules
   restore each footer region's own normal background (taken straight
   from the theme's style.css) so none of them are ever affected,
   regardless of the reading background color chosen. */
body.singular.wlm-reading-bg-brown #sub-footer,
body.singular.wlm-reading-bg-yellow #sub-footer {
	background-color: #f7f7f7 !important;
}
body.singular.wlm-reading-bg-brown #footer,
body.singular.wlm-reading-bg-yellow #footer {
	background-color: #006060 !important;
}
body.singular.wlm-reading-bg-brown #post-footer,
body.singular.wlm-reading-bg-yellow #post-footer {
	background-color: #f7f7f7 !important;
}
/* Belt-and-suspenders: also reset every element *inside* those three
   regions (widget wrappers, text-widget markup, etc.) back to
   transparent, so nothing nested in there can end up showing the
   reading background either — regardless of whether it's the theme's
   own markup or a widget added later. None of them have their own
   visible background in the theme to begin with, so this changes
   nothing about how they normally look. */
body.singular.wlm-reading-bg-brown #sub-footer *,
body.singular.wlm-reading-bg-yellow #sub-footer *,
body.singular.wlm-reading-bg-brown #footer *,
body.singular.wlm-reading-bg-yellow #footer *,
body.singular.wlm-reading-bg-brown #post-footer *,
body.singular.wlm-reading-bg-yellow #post-footer * {
	background-color: transparent !important;
}

/* A "Text" widget in the Sub Footer widget area was written with the
   post content's own .entry-content / .entry-the-content markup
   pasted into it (visible in its raw text: <div class="entry-content">
   ...). That makes it match every selector below by class name alone,
   even though it isn't the actual post. :not(#sub-footer *) etc. below
   excludes anything sitting inside the three footer regions from all
   of the reading-background styling — background, text color, padding,
   corners — so a widget that happens to reuse these class names is
   never touched, no matter what it's named. */
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *),
body.wlm-reading-bg-brown .entry-the-content:not(#sub-footer *):not(#footer *):not(#post-footer *) {
	background-color: #e9d9bd !important;
	color: #4a3524 !important;
}
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h1,
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h2,
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h3,
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h4,
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) li {
	color: #4a3524 !important;
}
/* The padding below gives the brown card some breathing room, but
   padding alone pushes the box's content inward — text visibly
   shifts down-and-right versus the White background (no padding).
   Pairing it with an equal, opposite negative margin keeps the box's
   rendered content position exactly where it was: negative
   margin-left/-top pulls the box back by the same amount the
   padding just pushed the text forward by, so they cancel out and
   only the card's outer edges (background/corners) move outward.
   Text position is unaffected switching between White/Brown/Yellow. */
body.wlm-reading-bg-brown .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) {
	padding: 24px 28px;
	margin: -24px -28px;
	border-radius: 8px;
	border-bottom: none;
}

body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *),
body.wlm-reading-bg-yellow .entry-the-content:not(#sub-footer *):not(#footer *):not(#post-footer *) {
	background-color: #fdf6e0 !important;
	color: #3b3b2a !important;
}
body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h1,
body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h2,
body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h3,
body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) h4,
body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) li {
	color: #3b3b2a !important;
}
/* Same padding/negative-margin cancellation as the Brown block above
   — see the comment there. */
body.wlm-reading-bg-yellow .entry-content:not(#sub-footer *):not(#footer *):not(#post-footer *) {
	padding: 24px 28px;
	margin: -24px -28px;
	border-radius: 8px;
	border-bottom: none;
}

/* =====================================================
   DARK MODE OVERRIDES — Login popup + Account panel
   -----------------------------------------------------------------------
   The theme's Dark Mode engine (js/darkmode.js) only auto-recolors an
   element when: its background is pure #ffffff (-> dark bg), or its
   text is pure #000000 / near-black #333333-ish (-> white) — and even
   then only when that text isn't inside an interactive tag (<label>,
   <a>, <button>, <select>, etc), which the engine always skips on
   purpose. Several colours here (#222, #555, #888, #999, #333 inside
   <label>, #222/#b32d2e inside <a>) fall outside all of that, so the
   engine leaves them untouched and they end up unreadable on the dark
   background it *does* apply. These rules set them explicitly instead.
   !important is used so they win over the engine, the same way the
   Reading Background rules above do. Admin-configured overrides made
   in Customize -> Dark Mode (Ignore/Force White/Force Bg/Remap
   Colours) only affect the engine's own JS-driven inline styles, not
   these stylesheet rules, so they stay independent of one another.
===================================================== */

/* ---- Reading Background (Brown / Yellow) text color ----
   As of theme v8.5.1, js/darkmode.js's rescanElement() has a
   healStaleWhiteText() self-heal step that automatically un-forces
   stale white text once it detects the background behind it is no
   longer the engine's own dark backdrop (e.g. this feature's Brown/
   Yellow .entry-content background, set above). Once un-forced, the
   plain (non-dark-mode-scoped) color rules above this comment block —
   the ones that already handle light mode — take over correctly on
   their own, in both light AND dark mode, via ordinary CSS
   inheritance. No dark-mode-specific override is needed here anymore
   (an earlier version of this file had one; it's now redundant and
   was removed to cut down on !important usage — see this plugin's
   changelog). See the "DEPENDED ON BY" warning block at the top of
   the theme's include/darkmode.php and js/darkmode.js for how this
   coupling works and why it must not be broken by a future theme
   update. */

/* ---- Login popup ---- */
[data-wlcustom-dm="dark"] .wlm-login-modal-title {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-login-field label {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-login-modal-close {
	color: #b8bec2 !important;
}
[data-wlcustom-dm="dark"] .wlm-login-modal-close:hover {
	color: #ffffff !important;
}

/* ---- Account panel (opened from the profile/avatar icon) ---- */
[data-wlcustom-dm="dark"] .wlm-account-panel-inner {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-name {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-status {
	color: #a9b0b5 !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-close {
	color: #b8bec2 !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-close:hover {
	color: #ffffff !important;
}
@media (max-width: 1023px) {
	/* Mobile close button keeps its own light circle background (set
	   above, and left untouched by the engine since #f2f2f2 isn't pure
	   white) — so it needs its original dark-on-light colours back,
	   not the light-on-dark colours used everywhere else. */
	[data-wlcustom-dm="dark"] .wlm-panel-close {
		background: #f2f2f2 !important;
		color: #555 !important;
	}
}
[data-wlcustom-dm="dark"] .wlm-panel-section-title {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-font-size-slider-labels span {
	color: #9aa3a8 !important;
}
[data-wlcustom-dm="dark"] .wlm-font-size-slider-labels span.is-active {
	color: #33cccc !important;
}
[data-wlcustom-dm="dark"] .wlm-align-mobile-note {
	color: #9aa3a8 !important;
}
/* Fills stay as-is in dark mode (same as the brown/yellow reading-
   background override itself, which is independent of Dark Mode) —
   only the resting border needs to lighten so it doesn't disappear
   against the panel's dark background. */
[data-wlcustom-dm="dark"] .wlm-bg-btn {
	border-color: #33373f !important;
}
[data-wlcustom-dm="dark"] .wlm-bg-btn:hover {
	border-color: #4a4f58 !important;
}
[data-wlcustom-dm="dark"] .wlm-bg-btn.is-active {
	border-color: #33cccc !important;
}
/* The "White" swatch is the only one with a pure #ffffff fill, so
   it's the only one the theme's Dark Mode engine auto-recolors to a
   dark background (see reasoning above wlm-panel-readlater-title in
   dashboard.css). That leaves its label's #333 text unreadable
   against its now-dark fill, so it needs an explicit override here —
   Brown/Yellow keep their pale fills untouched and stay fine as-is. */
[data-wlcustom-dm="dark"] .wlm-bg-btn[data-bg-key="default"] .wlm-bg-btn-label {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-links-menu a {
	color: var(--wlcustom-dm-text, #e8e6e3) !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-links-menu a:hover {
	color: #33cccc !important;
}
[data-wlcustom-dm="dark"] .wlm-panel-footer-note {
	color: #6b7378 !important;
}
[data-wlcustom-dm="dark"] .wlm-help-link {
	color: #9aa3a8 !important;
}
[data-wlcustom-dm="dark"] .wlm-help-link:hover {
	color: #33cccc !important;
}
[data-wlcustom-dm="dark"] .wlm-logout-link:hover {
	color: #33cccc !important;
}