/* LifeLearn Tool Edge v1.1.8 — one premium, functional edge.
   My Locker has a split panel/destination spine and an authored body;
   Reading Comfort opens its existing settings directly. */

.llte-edge,
.llte-edge *,
.llte-panel,
.llte-panel * { box-sizing: border-box; }

/* ─── The stack ────────────────────────────────────────────────────────── */

.llte-edge {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	/* ABOVE the overlay and the panel on purpose. If the tabs sat under the
	   overlay, moving the pointer from one tab to the next with a panel
	   already open would be blocked and hover-to-switch could never work. */
	z-index: 9996;
	display: none;                 /* desktop only; see the query below */
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	transition: right .5s cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 1100px) {
	.llte-edge { display: flex; }
}

.llte-edge.llte-shift { right: 420px; }

.llte-tab {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 44px;
	min-height: 150px;
	padding: 16px 0;
	border: none;
	border-radius: 12px 0 0 12px;
	background: #0E1B3D;
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: -5px 0 20px rgba(14, 27, 61, .28);
	transition: background .22s, width .22s;
}

.llte-tab .llte-vtxt { writing-mode: vertical-rl; line-height: 1; }

.llte-tab svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #3ECFB8;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.llte-tab .llte-aa {
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .04em;
	color: #3ECFB8;
}

.llte-tab .llte-count {
	background: #3ECFB8;
	color: #0E1B3D;
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0;
	padding: 3px 7px;
}

/* Hover moves the tab to the selected state. Deliberately no transform
   here: the wave animation owns transform, and a transform in :hover is
   silently overridden while that animation runs. */
@media (hover: hover) {
	.llte-tab:hover {
		background: #0B8676;
		width: 50px;
		box-shadow: -5px 0 20px rgba(14, 27, 61, .28),
		            -3px 0 26px rgba(14, 159, 139, .55);
	}
}

.llte-tab:focus-visible {
	background: #0B8676;
	width: 50px;
	outline: 2px solid #3ECFB8;
	outline-offset: 2px;
}

.llte-tab.llte-active { background: #0B8676; }

/* ─── Micro-animations, carried over from the live panel ───────────────── */

@keyframes llteTabIn {
	from { transform: translateX(112%); }
	to   { transform: translateX(0); }
}

@keyframes llteTabWave {
	0%, 84%, 100% { transform: translateX(0); }
	88%           { transform: translateX(-8px); }
	92%           { transform: translateX(0); }
	96%           { transform: translateX(-5px); }
}

@keyframes llteTabGlow {
	0%, 100% { box-shadow: -5px 0 20px rgba(14, 27, 61, .28); }
	50%      { box-shadow: -5px 0 16px rgba(14, 27, 61, .28),
	                       -3px 0 28px rgba(14, 159, 139, .6); }
}

.llte-tab { animation: llteTabIn .6s cubic-bezier(.34, 1.4, .64, 1) backwards; }

.llte-tab[data-key="otp"] { animation-delay: .50s; }
.llte-tab[data-key="lk"]  { animation-delay: .65s; }
.llte-tab[data-key="rc"]  { animation-delay: .80s; }

/* The wave and the glow are homepage-only, exactly as the live panel has
   it, and stop for good once the panel has been used. */
.llte-tab.llte-anim {
	animation: llteTabIn .6s cubic-bezier(.34, 1.4, .64, 1) .5s backwards,
	           llteTabWave 7s ease-in-out 2s infinite,
	           llteTabGlow 3.4s ease-in-out 1.6s infinite;
}

.llte-tab.llte-anim.llte-seen {
	animation: llteTabGlow 4.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.llte-tab,
	.llte-tab.llte-anim,
	.llte-tab.llte-anim.llte-seen { animation: none; }
	/* The bottom sheet's slide, for the same reason. Written here rather than
	   in a width-scoped copy so there is only one reduced-motion rule to read. */
	.llte-panel { transition: none; }
}

/* ─── The panel ────────────────────────────────────────────────────────── */

.llte-overlay {
	position: fixed;
	inset: 0;
	z-index: 9991;
	background: rgba(14, 27, 61, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s;
}

.llte-overlay.llte-open { opacity: 1; pointer-events: all; }
/* The clear backdrop for Reading comfort (see fill()). It still sits over
   the page and still takes the outside click; it does not blur, and its
   tint is a left-to-right gradient rather than a flat wash, so the page
   reads truest at the far side and deepens toward the panel.

   v1.1.6 — THE VALUES BELOW ARE HERS, from the "Comfort Panel Depth" tuning
   page (2 Sep 2026): spread 100px · depth 28% · softness 0.8 · veil 60% from
   0% · lit edge 3px · no lift · no radius. Pasted as generated, not
   reinterpreted; only the lit edge is scoped to the desktop drawer, since
   a vertical stripe has no left edge to sit on in the phone sheet. */
.llte-overlay.llte-clear {
	background: linear-gradient(to right, transparent 0%, rgba(14,27,61,0.6) 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* the desktop drawer */
.llte-panel.llte-clear {
	box-shadow:
		-3px 0 8px rgba(14,27,61,0.154),
		-12px 0 16px rgba(14,27,61,0.224),
		-35px 0 34px rgba(14,27,61,0.28),
		-100px 0 86px rgba(14,27,61,0.238);
}
/* the lit edge */
@media (min-width: 1100px) {
	.llte-panel.llte-clear::before {
		content: "";
		position: absolute;
		left: 0; top: 0; bottom: 0;
		width: 3px;
		background: linear-gradient(to bottom, #3ECFB8, #0B8676 60%, #0E1B3D);
		z-index: 1;
	}
}

.llte-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 420px;
	z-index: 9995;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -14px 0 50px rgba(14, 27, 61, .22);
	transform: translateX(100%);
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
	overflow: hidden;
}

.llte-panel.llte-open { transform: translateX(0); }

/* Keep the complete Tool Edge header visible for signed-in WordPress admins. */
body.admin-bar .llte-panel { top: 32px; }

/* Header — the live panel's own navy bar */
.llte-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
	padding: 0 22px;
	background: #0E1B3D;
}

.llte-head span {
	font-family: 'Outfit', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #3ECFB8;
}

.llte-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.llte-close:hover { background: rgba(255, 255, 255, .26); }

/* Body — contents sit centred between header and footer */
.llte-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	min-height: 0;
	/* Chaining is ALLOWED on the desktop drawer. `contain` here trapped the
	   wheel: with the panel scrolled to its top, carrying on upwards did
	   nothing at all, while an obviously scrollable page sat in plain view
	   beside it. The drawer covers 420px of the screen, not the screen, so a
	   reader reasonably expects the page to take over once the panel has no
	   more to give. The bottom sheet re-asserts `contain` further down, where
	   containment is the right behaviour. */
	overscroll-behavior-y: auto;
	padding: 14px 0;
}

.llte-mid { min-height: 0; margin: auto 0; width: 100%; }

/* Section links — the live panel's own row */
.llte-link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 50px;
	padding: 0 24px;
	border-left: 3px solid transparent;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #0E1B3D;
	text-decoration: none;
	transition: .15s;
}

.llte-link .llte-ico {
	flex-shrink: 0;
	width: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.llte-link .llte-ico svg { display: block; width: 18px; height: 18px; stroke-width: 2.1; }

.llte-link:hover,
.llte-link.llte-current {
	background: #f0fdfa;
	color: #0B8676;
	border-left-color: #0E9F8B;
}

/* Footer card — kept exactly as the live panel has it */
.llte-cta {
	flex: none;
	margin: 8px 16px 16px;
	padding: 16px;
	border-radius: 14px;
	background: linear-gradient(140deg, #0E1B3D, #10254e);
	color: #fff;
}

.llte-cta strong {
	display: block;
	margin-bottom: 3px;
	font-family: 'Outfit', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
}

.llte-cta span {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .7);
}

.llte-cta a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 8px;
	background: #3ECFB8;
	color: #0E1B3D;
	font-family: 'Outfit', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

/* Where an adopted control sits while it is being hosted. The control keeps
   its own styling; only its box is given room. */
.llte-host { padding: 0 22px; }
.llte-host > * { position: static !important; max-width: 100% !important; }

/* The marker left in the borrowed control's original place, so it can be
   put back exactly where it came from. */
.llte-mark { display: none !important; }

/* My Locker: the upper surface opens context; the gold seal is navigation. */
.llte-locker-spine {
	display: grid;
	grid-template-rows: minmax(190px, 1fr) 54px;
	width: 66px;
	min-height: 244px;
	border-radius: 16px 0 0 16px;
	background: #10254e;
	box-shadow: -8px 0 28px rgba(14, 27, 61, .28);
	overflow: hidden;
}

.llte-locker-open-tab {
	width: 66px;
	min-height: 190px;
	padding: 14px 0 11px;
	border-radius: 0;
	box-shadow: none;
	animation-delay: .65s;
}

.llte-locker-crest {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 10px;
}

.llte-locker-open-tab .llte-vtxt { flex: 1; }
.llte-locker-count {
	width: 50px;
	padding-top: 9px;
	border-top: 1px solid rgba(255,255,255,.22);
	color: #F4C542;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
}

@media (hover: hover) {
	.llte-locker-open-tab:hover { width: 66px; background: #0B8676; }
}
.llte-locker-open-tab:focus-visible { width: 66px; }

.llte-locker-destination {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F4C542;
	color: #0E1B3D;
	text-decoration: none;
	transition: background .18s, color .18s;
}
.llte-locker-destination svg { width: 22px; height: 22px; }
.llte-locker-destination:hover { background: #ffd75e; color: #07122b; }
.llte-locker-destination:focus-visible { outline: 3px solid #0E9F8B; outline-offset: -4px; }

/* My Locker body. Dynamic values are inserted as text; this is visual only. */
.llte-locker-view {
	width: 100%;
	max-width: 420px;
	padding: 30px 30px 34px;
	font-family: 'Outfit', sans-serif;
	color: #0E1B3D;
}
.llte-locker-view h2 {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: #071A3D;
}
.llte-locker-intro {
	margin: 0 0 24px;
	color: #52627b;
	font-size: 15px;
	line-height: 1.55;
}
.llte-locker-summary-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 17px;
	border: 1px solid #dce7e5;
	border-radius: 14px;
	background: #f4faf9;
}
.llte-locker-summary-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #0B8676;
	color: #fff;
}
.llte-locker-summary-mark svg { width: 20px; height: 20px; }
.llte-locker-summary-row strong,
.llte-locker-summary-row small { display: block; }
.llte-locker-summary-row strong { margin-bottom: 2px; font-size: 18px; }
.llte-locker-summary-row small { color: #65738a; font-size: 12.5px; }
.llte-locker-open {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 50px;
	padding: 0 17px;
	border-radius: 12px;
	background: #0E1B3D;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s, transform .18s;
}
.llte-locker-open:hover { background: #0B8676; color: #fff; transform: translateY(-1px); }
.llte-locker-open:focus-visible { outline: 3px solid #3ECFB8; outline-offset: 3px; }
.llte-locker-safe {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0;
	padding: 13px 14px;
	border-radius: 12px;
	background: #f2f6f6;
	color: #59697e;
	font-size: 12px;
	line-height: 1.45;
}
.llte-locker-safe svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #0B8676; }
.llte-locker-free-note { margin: 14px 0 0; color: #59697e; font-size: 13px; line-height: 1.45; }

/* The guide controller keeps every existing listener; only its presentation changes. */
.llte-host-lk { padding: 0; }
.llte-host-lk .lllk-guide-open,
.llte-host-lk .lllk-guide-veil,
.llte-host-lk .lllk-guide-head,
.llte-host-lk .lllk-guide-close { display: none !important; }
.llte-host-lk .lllk-guide-panel {
	display: block !important;
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.llte-host-lk .lllk-guide-title { margin: 0 0 14px; color: #0E1B3D; font-size: 14px; }
.llte-host-lk .lllk-guide-keep { margin: 0 0 12px; }
.llte-host-lk .lllk-guide-keep a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid #b9ded8;
	border-radius: 999px;
	background: #eaf8f5;
	color: #0B8676;
	font: 700 12px/1 'Outfit',sans-serif;
	text-decoration: none;
}
/* v1.1.8 - one action per row, at every width. The Locker's own stylesheet
   lays its three actions out as three columns; inside this panel each action
   is drawn as a row (icon | words | badge), and three of those side by side in
   a phone sheet broke the words letter by letter and pushed the PREMIUM badge
   over them (seen on her phone, 2 Sep). The desktop drawer already rendered
   one column, so it looks the same as before. */
.llte-host-lk .lllk-guide-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 9px; margin: 0 !important; }
.llte-host-lk .lllk-guide-actions button {
	display: grid !important;
	grid-template-columns: 40px minmax(0,1fr) auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	padding: 10px 11px;
	border: 1px solid #dce5e8;
	border-radius: 13px;
	background: #fff;
	color: #0E1B3D;
	text-align: left;
	box-shadow: 0 6px 18px rgba(14,27,61,.05);
}
.llte-host-lk .lllk-guide-actions button:hover { border-color: #0E9F8B; background: #f6fcfb; }
.llte-action-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: #e8f7f4;
	color: #0B8676;
}
.llte-action-icon svg { width: 20px; height: 20px; }
.llte-action-copy strong,
.llte-action-copy small { display: block; }
.llte-action-copy strong { font: 700 13.5px/1.25 'Outfit',sans-serif; color: #0E1B3D; }
.llte-action-copy small { margin-top: 3px; color: #6a788d; font: 400 11px/1.3 'Outfit',sans-serif; }
.llte-premium-badge {
	padding: 5px 7px;
	border-radius: 999px;
	background: #fff5cb;
	color: #765900;
	font: 800 9px/1 'Outfit',sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.llte-host-lk .lllk-guide-note-form,
.llte-host-lk .lllk-guide-noteform {
	display: grid;
	gap: 9px;
	margin-top: 12px;
}
.llte-host-lk .lllk-guide-note-form[hidden],
.llte-host-lk .lllk-guide-noteform[hidden] { display: none !important; }
.llte-host-lk .lllk-guide-note-form textarea,
.llte-host-lk .lllk-guide-noteform textarea {
	width: 100%;
	min-height: 92px;
	padding: 12px 13px;
	border: 1px solid #cfdadd;
	border-radius: 12px;
	background: #fff;
	color: #0E1B3D;
	font: 400 13px/1.45 'Outfit',sans-serif;
	resize: vertical;
}
.llte-host-lk .lllk-guide-note-form textarea:focus,
.llte-host-lk .lllk-guide-noteform textarea:focus { border-color: #0E9F8B; outline: 3px solid rgba(62,207,184,.24); }
.llte-host-lk .lllk-guide-note-form button,
.llte-host-lk .lllk-guide-noteform button {
	justify-self: end;
	min-height: 38px;
	padding: 0 15px;
	border: 0;
	border-radius: 10px;
	background: #0E1B3D;
	color: #fff;
	font: 700 12px/1 'Outfit',sans-serif;
	cursor: pointer;
}
.llte-host-lk .lllk-guide-note-form button:hover,
.llte-host-lk .lllk-guide-noteform button:hover { background: #0B8676; }
.llte-locker-free .lllk-guide-actions [data-lllk-guide-note] { display: none !important; }

/* Comfort opens directly inside Tool Edge: no redundant launcher card. */
.llte-host-rc { padding: 0 30px; }
/* v1.0.14 — the real Aa button is only redundant where the edge exists to
   replace it. The edge is hidden below 1100px, so hiding the button at every
   width left guide pages with no reading-comfort control at all on a phone.
   Scoped to the widths where Tool Edge actually shows the control instead. */
@media (min-width: 1100px) {
	.llte-on #rcb.rc-btn { display: none !important; }
}
.llte-host-rc .rc-btn { display: none !important; }
.llte-host-rc .rc-panel {
	display: block !important;
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.llte-host-rc .rc-panel h4 { margin: 0 0 10px; color: #0E1B3D; font: 750 28px/1.12 'Outfit',sans-serif; }
.llte-host-rc .rc-panel p { margin: 0 0 24px; color: #5d6877; font-size: 15px; line-height: 1.55; }
.llte-host-rc .rc-panel label { color: #42506a; font-size: 13px; font-weight: 700; }
.llte-host-rc .rc-row { max-width: 100%; }
.llte-host-rc .rc-lab { display: block; margin: 18px 0 7px; color: #42506a; font-size: 13px; font-weight: 700; }
.llte-host-rc .tintset { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.llte-host-rc .tintset button { width: 100%; min-width: 0; height: 25px; padding: 0; }
.llte-host-rc .tintint {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 7px 9px;
	margin-top: 9px;
}
.llte-host-rc .tintint > span:first-child { grid-column: 1; grid-row: 1; }
.llte-host-rc .tintint > input[type="range"] { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; margin: 0; }
.llte-host-rc .tintint > input[type="range"] + span { grid-column: 3; grid-row: 1; }
.llte-host-rc .tintlvl-out {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: start;
	min-height: 38px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 9px;
	background: #0A786A;
	color: #fff;
	font-weight: 700;
}
/* v1.1.5 — one explicit colour pair in every state, after the Library's
   generic state rules and above them in specificity (three classes to two):
   white on #0A786A is 5.37:1. The old #0E9F8B with white was 3.31:1, and a
   focused chip could land teal-on-teal (1.63:1) — the audit's F2. */
.llte-host-rc .tintlvl-out,
.llte-host-rc .tintlvl-out:hover,
.llte-host-rc .tintlvl-out:focus,
.llte-host-rc .tintlvl-out:active,
body.is-tinted .llte-host-rc .tintlvl-out,
body.is-tinted .llte-host-rc .tintlvl-out:hover,
body.is-tinted .llte-host-rc .tintlvl-out:focus,
body.is-tinted .llte-host-rc .tintlvl-out:active {
	background: #0A786A;
	border-color: #0A786A;
	color: #fff;
}
.llte-host-rc .tintlvl-out:hover:not(:disabled),
.llte-host-rc .tintlvl-out:focus:not(:disabled) { background: #085F54; border-color: #085F54; }
.llte-host-rc .tintlvl-out:focus-visible { outline: 3px solid #0E1B3D; outline-offset: 2px; }
.llte-host-rc .tintlvl-out:disabled { opacity: .45; }
.llte-host-rc .rc-row { display: flex; gap: 0; }
.llte-host-rc .rc-row { overflow: hidden; border: 1px solid #dce5e8; border-radius: 13px; background: #fff; }
.llte-host-rc .rc-row button { flex: 1 1 0; min-width: 0; min-height: 46px; border-radius: 0 !important; }
.llte-host-rc .rc-row button + button { border-left: 1px solid #dce5e8; }
.llte-host-rc .rc-note { margin-top: 8px !important; }
/* The Library controller creates this on body. Tool Edge moves that real,
   live-region notice into the borrowed panel while Reading comfort is open. */
.llte-host-rc .llq-note {
	display: none !important;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	z-index: auto !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 16px 0 0 !important;
	padding: 15px 44px 15px 16px !important;
	border: 1px solid #b9e6de !important;
	border-radius: 14px !important;
	background: #edf9f6 !important;
	box-shadow: none !important;
	font-family: 'DM Sans', sans-serif !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}
.llte-host-rc .llq-note.is-on { display: block !important; }
.llte-host-rc .llq-note h5 { margin: 0 0 5px !important; color: #0e1b3d !important; font: 750 15px/1.25 'Outfit', sans-serif !important; }
.llte-host-rc .llq-note p { margin: 0 0 7px !important; color: #466071 !important; font-size: 13px !important; line-height: 1.5 !important; }
.llte-host-rc .llq-note p:last-child { margin-bottom: 0 !important; }
.llte-host-rc .llq-x { background: #d9f2ed !important; color: #0b7467 !important; }

@media (max-height: 720px) and (min-width: 1100px) {
	.llte-body { justify-content: flex-start; padding: 12px 0 18px; }
	.llte-mid { margin: 0; }
	.llte-locker-view { padding-top: 22px; padding-bottom: 24px; }
}

/* =====================================================================
   v1.1.0 — THE MOBILE DOCK  (everything below 1100px)

   The edge above 1100px is untouched. Below it the same controls and the
   same panel are re-presented: a bottom-right stack of 48px circles, or a
   single bottom-centre capsule on a page whose only control is Sections,
   with the panel as a bottom sheet.

   Every rule that hides an owner's own control is gated on a body flag set
   by render() only when this dock mounted a working replacement for it, so
   a control the dock did not find is never hidden.
   ===================================================================== */

/* The sheet's drag handle. It exists in every build and is shown only in
   dock mode, so the desktop panel's markup and appearance do not change. */
.llte-grip { display: none; }

/* The exact complement of `min-width: 1100px`, so there is no width at which
   neither presentation applies. See the MQ_EDGE note in the script. */
@media not all and (min-width: 1100px) {

	/* -- the stack ------------------------------------------------------ */
	.llte-edge.llte-mode-dock {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		top: auto;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		right: 12px;
		transform: none;
		gap: 10px;
		transition: opacity .25s ease;
	}
	/* .llte-shift slides the edge aside for the desktop side panel. A bottom
	   sheet does not push anything sideways, so it must not apply here. */
	.llte-edge.llte-mode-dock.llte-shift { right: 12px; }

	.llte-edge.llte-mode-dock .llte-tab {
		position: relative;
		flex-direction: row;
		width: 48px;
		min-height: 48px;
		height: 48px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
		box-shadow: 0 6px 18px rgba(14, 27, 61, .28);
	}
	.llte-edge.llte-mode-dock .llte-tab svg { width: 20px; height: 20px; }

	/* v1.1.3 — her call from the phone mockup: the My Locker circle is white
	   with a navy bookmark, so the three circles read as three different
	   things at a glance. Dock mode only; the desktop tab is untouched. The
	   open state keeps the teal the other two use. */
	.llte-edge.llte-mode-dock .llte-tab[data-key="lk"] {
		background: #fff;
		box-shadow: 0 6px 18px rgba(14, 27, 61, .22);
	}
	.llte-edge.llte-mode-dock .llte-tab[data-key="lk"] svg { stroke: #0E1B3D; }
	.llte-edge.llte-mode-dock .llte-tab[data-key="lk"].llte-active { background: #0B8676; }
	.llte-edge.llte-mode-dock .llte-tab[data-key="lk"].llte-active svg { stroke: #3ECFB8; }
	.llte-edge.llte-mode-dock .llte-tab .llte-aa { font-size: 16px; }

	/* The vertical label is the edge's affordance. On a circle the name is
	   carried by aria-label instead, so it stays available to a screen reader
	   while taking no space. */
	.llte-edge.llte-mode-dock .llte-tab .llte-vtxt {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* The kept count, as a number only. An unknown count leaves the badge
	   empty and :empty removes it, so a blank dot can never appear. */
	.llte-edge.llte-mode-dock .llte-dock-count {
		position: absolute;
		top: -2px;
		right: -2px;
		min-width: 19px;
		height: 19px;
		padding: 0 5px;
		border-radius: 999px;
		background: #F4C542;
		color: #0E1B3D;
		font: 800 10.5px/19px 'Outfit', sans-serif;
		text-align: center;
	}
	.llte-edge.llte-mode-dock .llte-dock-count:empty { display: none; }

	/* The wave and glow were written for a tall edge tab. Keep the entrance,
	   drop the looping attention animations on a thumb-sized circle. */
	.llte-edge.llte-mode-dock .llte-tab.llte-anim,
	.llte-edge.llte-mode-dock .llte-tab.llte-anim.llte-seen {
		animation: llteTabIn .6s cubic-bezier(.34, 1.4, .64, 1) .5s 1 backwards;
	}

	/* -- the Sections-only capsule -------------------------------------- */
	.llte-edge.llte-mode-dock.llte-capsule {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		align-items: center;
	}
	.llte-edge.llte-mode-dock.llte-capsule.llte-shift { right: auto; }
	.llte-edge.llte-mode-dock.llte-capsule .llte-tab {
		width: auto;
		height: 46px;
		min-height: 46px;
		padding: 0 20px;
		gap: 9px;
		border-radius: 999px;
	}
	.llte-edge.llte-mode-dock.llte-capsule .llte-tab .llte-vtxt {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		overflow: visible;
		writing-mode: horizontal-tb;
		font-size: 13.5px;
		letter-spacing: .01em;
	}

	/* -- the panel becomes a bottom sheet -------------------------------- */
	.llte-panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: 82vh;
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
		box-shadow: 0 -14px 50px rgba(14, 27, 61, .22);
	}

	/* The admin bar pins the desktop panel below itself; a bottom sheet starts
	   at the bottom, so that offset is cleared here - in a rule of its OWN.
	   Grouping this selector with the block above would have given the CLOSED
	   transform a specificity of (0,2,1) for signed-in admins, beating
	   .llte-panel.llte-open at (0,2,0), and the sheet would never have slid up
	   for them. It did exactly that in testing, and only while signed in. */
	body.admin-bar .llte-panel { top: auto; }

	.llte-panel.llte-open { transform: translateY(0); }

	/* v1.1.4 - her call: the sheet closes by swipe, not by an X. The X is
	   gone below 1100px; the grip is a full-width 44px button that closes on
	   tap, is the swipe handle, and is what keyboard focus lands on when the
	   sheet opens. Escape closes too. */
	.llte-close { display: none; }

	.llte-grip {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 100%;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 18px 18px 0 0;
		background: transparent;
		cursor: pointer;
	}
	/* v1.1.7 - the swipe handles own their touches. Without this the browser
	   can claim a vertical drag as a page scroll and cancel the gesture. */
	.llte-grip, .llte-head { touch-action: none; }
	.llte-grip span {
		display: block;
		width: 48px;
		height: 5px;
		border-radius: 999px;
		background: #B8C4D0;
	}
	.llte-grip:focus-visible { outline: 3px solid #0E9F8B; outline-offset: -4px; }
	/* the phone sheet: the same depth, rising from the top edge (her values) */
	.llte-panel.llte-clear {
		box-shadow:
			0 -3px 8px rgba(14,27,61,0.154),
			0 -12px 16px rgba(14,27,61,0.224),
			0 -35px 34px rgba(14,27,61,0.28),
			0 -100px 86px rgba(14,27,61,0.238);
		top: auto; right: 0; bottom: 0;
	}
	.llte-overlay.llte-clear { background: linear-gradient(to bottom, transparent 0%, rgba(14,27,61,0.6) 100%); }

	/* A sheet reads from the top down. The desktop panel's vertical centring
	   would leave a short list floating in the middle of it. */
	/* The sheet DOES contain its scroll. Flicking past the end of a bottom
	   sheet and dragging the page along behind it reads as a fault on a
	   phone, and the sheet covers the screen, so there is nothing visible
	   to scroll to. This is the deliberate difference from the drawer. */
	.llte-body { justify-content: flex-start; overscroll-behavior-y: contain;
		padding: 10px 0 calc(18px + env(safe-area-inset-bottom, 0px)); }
	.llte-mid { margin: 0; }
	.llte-locker-view { max-width: none; padding: 22px 22px 26px; }
	.llte-locker-view h2 { font-size: 24px; }
	.llte-host-rc { padding: 0 22px; }

	/* The stack sits above the overlay so the desktop can hover between tabs.
	   With the sheet open there is nothing to hover, and a stack floating over
	   the sheet is just clutter in the way of the reader's thumb. */
	.llte-panel.llte-open ~ .llte-edge.llte-mode-dock {
		opacity: 0;
		pointer-events: none;
	}

	/* -- suppressing the owners' own controls, and only where replaced ---- */

	/* The Library's resting Aa pill. Once borrowed, the element is no longer
	   inside .ll-resource, so this rule stops applying to it automatically and
	   it shows normally inside the sheet. */
	body.llte-dock-rc .ll-resource .rc { display: none !important; }

	/* My Locker's own fixed guide button, which currently lands on top of the
	   Listen Player. Its panel and veil are left alone - they are what the
	   dock's Locker control opens. */
	body.llte-dock-lk .lllk-guide-open { display: none !important; }

	/* ── the Listen Player's own Reading comfort route ─────────────────────
	   Snippet 83's floating player carries its OWN "Reading comfort" button and
	   pop-up, which is separate code from the Library's with its own settings.
	   Below 1100px that gave a reader two doors to the same idea, behind which
	   different things happened.

	   Hidden ONLY when this dock has mounted the real Aa control — the gate the
	   brief asks for — so a page where the dock could not find Comfort keeps the
	   player's route as the only way in. Snippet 83 itself is untouched: this is
	   one visibility rule in Tool Edge's own stylesheet, and removing the rule
	   restores the button. The selector is the player's own aria-label, read
	   from the live element, not guessed. */
	body.llte-dock-rc #llFloat .llxf-ic[aria-label="Reading comfort"],
	body.llte-dock-rc #llFloat #llfCfgPop { display: none !important; }

	/* The Sections snippet is switched off, but if it is ever switched back on
	   its mobile pill would draw beside this dock's own Sections control. Same
	   principle as the two rules above: hidden only where this dock has mounted
	   a Sections control of its own, so exactly one is ever visible. */
	body.llte-dock-otp .ll-toc-trigger,
	body.llte-dock-otp .ll-toc-tab { display: none !important; }

	/* -- the Listen Player clears the stack ------------------------------ */
	/* Left-anchored and narrowed rather than repositioned wholesale: the
	   player keeps its own bottom offset, safe-area handling and show/hide
	   transform contract.
	   BOUNDED BY right, NOT BY A WIDTH. A calc() on 100vw was 3px wrong in
	   testing at 390px, because 100vw includes the scrollbar gutter while the
	   stack's own `right` is measured from the content edge - so the two boxes
	   were being sized in different coordinate systems and touched. Setting
	   left and right and letting width resolve itself makes the clearance
	   exact at every width, with or without a scrollbar.
	   72px = the 48px stack + its 12px gutter + 12px clearance. */
	body.llte-dock-on #llFloat.llx-float {
		left: 12px;
		right: 72px;
		width: auto;
		max-width: none;
		transform: translateX(0) translateY(16px);
	}
	/* v1.1.3 — LEVEL WITH THE Aa CIRCLE. The player's own offset (90px below
	   640px, 24px above it) was set before this dock existed, to clear the
	   old Reading comfort pill; beside the stack it left the player floating
	   mid-way up the circles. Where the stack exists it now shares the
	   stack's bottom edge. Written as `bottom`, and as the player's own
	   custom property in case its stylesheet reads that instead. The capsule
	   page (Sections only, bottom-centre) is deliberately NOT included: there
	   the player must stay above the capsule, and keeps its own offset. */
	body.llte-dock-lk #llFloat.llx-float,
	body.llte-dock-rc #llFloat.llx-float {
		--llf-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
		/* !important on purpose: the player's own script can write an inline
		   `bottom` when it finds one of its anchors on the page, and an inline
		   style beats any ordinary stylesheet rule. Beside the stack the
		   stack owns the bottom edge, so this has to win. */
		bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
	}
	body.llte-dock-on #llFloat.llx-float.is-shown {
		transform: translateX(0) translateY(0);
	}
	/* The capsule is centred and short, so the player keeps its full width. */
	body.llte-dock-on:not(.llte-dock-lk):not(.llte-dock-rc) #llFloat.llx-float {
		left: 50%;
		right: auto;
		width: calc(100% - 20px);
		transform: translateX(-50%) translateY(16px);
	}
	body.llte-dock-on:not(.llte-dock-lk):not(.llte-dock-rc) #llFloat.llx-float.is-shown {
		transform: translateX(-50%) translateY(0);
	}
}