/* WLHHI Magazine reader */
.wlm-reader {
	--wlm-bar: #193d60;
	--wlm-accent: #ee6f00;
	--wlm-stage: #e9eef3;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1.5em;
	background: var(--wlm-stage);
	border-radius: 10px;
	overflow: hidden;
	outline: none;
	font-family: inherit;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.wlm-reader *, .wlm-reader *::before, .wlm-reader *::after { box-sizing: border-box; }
.wlm-stage {
	position: relative;
	height: calc(100vh - 150px);
	height: calc(100svh - 150px);
	min-height: 420px;
	max-height: 1150px;
	padding: 18px 64px;
}
.wlm-bookwrap { position: relative; width: 100%; height: 100%; }
.wlm-book { width: 100%; height: 100%; }
.wlm-page { background: #fff; overflow: hidden; }
.wlm-page img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; background: #fff; }
.wlm-hot {
	position: absolute;
	z-index: 3;
	display: block;
	border-radius: 3px;
	background: transparent;
	transition: background-color .2s, box-shadow .2s;
	cursor: pointer;
}
.wlm-hot:hover, .wlm-hot:focus-visible {
	background: color-mix(in srgb, var(--wlm-accent) 18%, transparent);
	box-shadow: inset 0 0 0 2px var(--wlm-accent);
	outline: none;
}
.wlm-flash .wlm-hot { animation: wlm-flash 1.4s ease-out .5s 1; }
@keyframes wlm-flash {
	0%, 100% { background: transparent; box-shadow: none; }
	30% { background: color-mix(in srgb, var(--wlm-accent) 22%, transparent); box-shadow: inset 0 0 0 2px var(--wlm-accent); }
}
.stf__parent { margin: 0 auto; }
.stf__block { filter: drop-shadow(0 6px 16px rgba(0,0,0,.18)); }

/* side arrows */
.wlm-side {
	position: absolute;
	top: 50%;
	z-index: 5;
	transform: translateY(-50%);
	width: 48px;
	height: 72px;
	border: 0;
	border-radius: 8px;
	background: rgba(255,255,255,.75);
	color: var(--wlm-bar);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
	transition: background .2s, opacity .2s;
}
.wlm-side svg { width: 32px; height: 32px; fill: currentColor; }
.wlm-side:hover { background: #fff; color: var(--wlm-accent); }
.wlm-side:disabled { opacity: 0; pointer-events: none; }
.wlm-side-prev { left: 8px; }
.wlm-side-next { right: 8px; }

/* toolbar */
.wlm-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	background: var(--wlm-bar);
	color: #fff;
	flex-wrap: wrap;
}
.wlm-nav, .wlm-tools { display: flex; align-items: center; gap: 2px; }
.wlm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
.wlm-btn svg { fill: currentColor; }
.wlm-btn:hover, .wlm-btn:focus-visible { background: rgba(255,255,255,.14); color: #fff; outline: none; }
.wlm-btn:focus-visible { box-shadow: 0 0 0 2px var(--wlm-accent); }
.wlm-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.wlm-pager { display: inline-flex; align-items: center; margin: 0 6px; font-size: 14px; white-space: nowrap; }
.wlm-pager input {
	width: 62px;
	height: 32px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 5px;
	background: rgba(255,255,255,.1);
	color: #fff;
	text-align: center;
	font: inherit;
	padding: 0 4px;
}
.wlm-pager input:focus { outline: 2px solid var(--wlm-accent); background: rgba(255,255,255,.2); }
.wlm-total { margin-left: 4px; opacity: .85; }

.wlm-scrub { flex: 1; min-width: 80px; max-width: 520px; accent-color: var(--wlm-accent); cursor: pointer; }
/* toast */
.wlm-toast {
	position: absolute;
	left: 50%;
	bottom: 70px;
	transform: translate(-50%, 10px);
	background: rgba(0,0,0,.82);
	color: #fff;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 20;
}
.wlm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* panels */
.wlm-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--wlm-barh, 52px);
	z-index: 15;
	max-height: 70%;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 -6px 20px rgba(0,0,0,.18);
	border-radius: 10px 10px 0 0;
	animation: wlm-up .2s ease-out;
}
.wlm-panel[hidden] { display: none; }
@keyframes wlm-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.wlm-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 16px; border-bottom: 1px solid #e5e7eb; color: var(--wlm-bar); }
.wlm-panel-head .wlm-btn { color: var(--wlm-bar); }
.wlm-panel-head .wlm-btn:hover { background: #f1f3f5; color: var(--wlm-bar); }
.wlm-panel-body { overflow: auto; padding: 14px; }
.wlm-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.wlm-thumb { position: relative; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; cursor: pointer; }
.wlm-thumb img { display: block; width: 100%; height: auto; aspect-ratio: .71; object-fit: cover; background: #eef1f4; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.wlm-thumb span { display: block; text-align: center; font-size: 12px; color: #444; padding-top: 3px; }
.wlm-thumb:hover, .wlm-thumb:focus-visible { border-color: #c9d3dd; outline: none; }
.wlm-thumb.is-cur { border-color: var(--wlm-accent); }
.wlm-toc { list-style: none; margin: 0; padding: 0; max-width: 640px; }
.wlm-toc button { display: flex; width: 100%; gap: 12px; justify-content: space-between; padding: 10px 6px; border: 0; border-bottom: 1px solid #eef0f2; background: none; cursor: pointer; font: inherit; color: #1d2327; text-align: left; }
.wlm-toc button:hover { color: var(--wlm-accent); }
.wlm-toc em { font-style: normal; color: #6b7280; }

/* zoom */
.wlm-zoom { position: fixed; inset: 0; z-index: 99999; background: rgba(15,22,30,.94); }
.wlm-zoom[hidden] { display: none; }
.wlm-zoom-scroll { position: absolute; inset: 0; overflow: auto; cursor: grab; -webkit-overflow-scrolling: touch; }
.wlm-zoom-scroll.is-panning { cursor: grabbing; }
.wlm-zoom-inner { display: flex; justify-content: center; width: max-content; min-width: 100%; padding: 10px; margin: 0 auto; }
.wlm-zoom-inner .wlm-page { position: relative; height: var(--h, 90vh); width: auto; aspect-ratio: auto; flex: 0 0 auto; }
.wlm-zoom-inner .wlm-page img { height: 100%; width: auto; }
.wlm-zoom-bar { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; background: var(--wlm-bar); border-radius: 8px; padding: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
html.wlm-lock, html.wlm-lock body { overflow: hidden !important; }

/* full screen */
.wlm-reader:fullscreen, .wlm-reader.is-full { max-width: none; border-radius: 0; margin: 0; }
.wlm-reader.is-full:not(:fullscreen) { position: fixed; inset: 0; z-index: 99998; }
.wlm-reader.is-full .wlm-stage { height: auto; max-height: none; flex: 1; min-height: 0; }
.wlm-reader:-webkit-full-screen { width: 100%; height: 100%; }

.wlm-noscript { display: grid; gap: 12px; padding: 12px; overflow: auto; height: 100%; }
.wlm-noscript img { width: 100%; height: auto; }

/* phones */
@media (max-width: 700px) {
	.wlm-reader { border-radius: 0; width: 100vw; max-width: 100vw !important; left: calc(50% - 50vw); }
	.wlm-stage { padding: 10px 8px; height: calc(100svh - 170px); min-height: 360px; }
	/* Arrows stay on phones: slim tabs on the page edges, above any ad. */
	.wlm-side { width: 34px; height: 56px; background: rgba(255,255,255,.82); z-index: 6; }
	.wlm-side svg { width: 26px; height: 26px; }
	.wlm-side-prev { left: 2px; }
	.wlm-side-next { right: 2px; }
	.wlm-btn-first, .wlm-btn-last, .wlm-scrub { display: none; }
	.wlm-bar { justify-content: center; padding: 4px 6px; }
	.wlm-btn { width: 38px; height: 38px; }
}

/* text version + archive */
.wlm-text { max-width: 860px; margin: 0 auto 2em; }
.wlm-text summary { cursor: pointer; font-weight: 600; }
.wlm-archive { display: grid; grid-template-columns: repeat(var(--wlm-cols, 4), minmax(0, 1fr)); gap: 28px 22px; margin: 1em 0 2em; }
@media (max-width: 900px) { .wlm-archive { grid-template-columns: repeat(min(var(--wlm-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 560px) { .wlm-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } }
.wlm-issue { display: block; text-decoration: none; color: inherit; }
.wlm-issue-cover { display: block; width: 100%; height: auto; aspect-ratio: .71; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; }
.wlm-issue:hover .wlm-issue-cover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
.wlm-issue-title { display: block; margin-top: 10px; font-weight: 700; }
.wlm-issue-date { display: block; font-size: .875em; opacity: .7; }
.wlm-cover-link { display: inline-block; text-decoration: none; }
.wlm-cover-link img { display: block; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.wlm-cover-link span { display: block; margin-top: 8px; font-weight: 700; }