/* com_lehesirvija reader — clean light surfaces, amber accent */
.ls-reader{
	--paper:#fff; --bg:#f4f2ec; --bg2:#ece8df; --ink:#1b1a17;
	--muted:#8a8578; --line:#e2ddd1; --amber:#e0991a;
	position:relative; display:flex; flex-direction:column;
	height:82vh; min-height:480px;
	background:radial-gradient(140% 90% at 50% -10%, var(--bg2) 0%, var(--bg) 55%);
	color:var(--ink); border-radius:10px; overflow:hidden;
	-webkit-user-select:none; user-select:none;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.ls-reader:fullscreen{ height:100vh; border-radius:0; }

/* Simulated fullscreen for browsers with no Fullscreen API at all (older
   iOS Safari never supported it for a plain element, only <video>) — a
   fixed, viewport-covering layout gets the same distraction-free reading
   experience without needing any browser API. */
.ls-reader.ls-simfull{
	position:fixed; inset:0; z-index:99999;
	width:100vw; height:100vh; height:100dvh;
	border-radius:0; margin:0;
}
html.ls-simfull-lock, html.ls-simfull-lock body{ overflow:hidden; }

.ls-progress{ height:3px; background:var(--line); flex:0 0 auto; }
.ls-progress > i{ display:block; height:100%; width:0;
	background:linear-gradient(90deg,var(--amber),#f2b53d);
	transition:width .35s cubic-bezier(.22,.61,.36,1); }

.ls-head{ flex:0 0 auto; padding:10px 16px; display:flex; align-items:center;
	justify-content:space-between; flex-wrap:wrap; gap:10px 14px; }
.ls-head-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.ls-head-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.ls-brand{ min-width:0; }
.ls-brand b{ font-weight:800; letter-spacing:-.01em; font-size:16px;
	display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ls-back{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
	background:var(--paper); color:var(--ink); border-radius:9px; padding:6px 12px;
	font-size:14px; font-weight:600; cursor:pointer; transition:background .15s; flex:0 0 auto; }
.ls-back:hover{ background:var(--bg); }
.ls-back svg{ width:16px; height:16px; }

.ls-stage{ position:relative; flex:1; min-height:0; }
.ls-osd{ position:absolute; inset:0; }
.ls-osd-scroll{ position:absolute; inset:0; }
.ls-loadbar{ position:absolute; top:0; left:0; right:0; height:3px; z-index:20;
	background:transparent; pointer-events:none; opacity:0; transition:opacity .25s; }
.ls-loadbar.ls-loadbar-show{ opacity:1; }
.ls-loadbar i{ display:block; height:100%; width:0%; background:var(--amber,#e0991a);
	transition:width .2s ease-out; }
.ls-osd .openseadragon-canvas{ outline:none; }

.ls-nav{ position:absolute; top:0; bottom:84px; width:14%; max-width:120px;
	display:flex; align-items:center; border:0; background:transparent;
	cursor:pointer; color:var(--ink); z-index:5; opacity:0; transition:opacity .2s; }
.ls-stage:hover .ls-nav{ opacity:1; }
.ls-reader.ls-isfull .ls-nav{ display:none; }
.ls-nav:disabled{ opacity:0 !important; pointer-events:none; }
.ls-prev{ left:0; justify-content:flex-start; padding-left:12px; }
.ls-next{ right:0; justify-content:flex-end; padding-right:12px; }
.ls-nav svg{ width:24px; height:24px; padding:10px; border-radius:50%;
	background:rgba(255,255,255,.92); box-shadow:0 4px 16px rgba(0,0,0,.12); box-sizing:content-box; }

.ls-bar{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
	display:flex; align-items:stretch; justify-content:center; gap:4px; flex-wrap:wrap;
	max-width:96%; z-index:8;
	background:rgba(255,255,255,.97); border:1px solid var(--line);
	border-radius:15px; padding:7px 9px; box-shadow:0 10px 30px -12px rgba(40,32,12,.4);
	backdrop-filter:blur(8px); }
.ls-bar .ls-tb{ border:0; background:transparent; color:var(--ink);
	min-width:62px; min-height:52px; padding:6px 8px; border-radius:10px; cursor:pointer;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
	transition:background .15s; -webkit-tap-highlight-color:transparent; }
.ls-bar .ls-tb:hover{ background:var(--bg); }
.ls-bar .ls-tb:active{ background:var(--bg2); }
.ls-bar .ls-tb:disabled{ opacity:.3; cursor:default; }
.ls-bar svg{ width:24px; height:24px; }
.ls-lbl{ font-size:12px; font-weight:600; line-height:1; white-space:nowrap; }
.ls-counter{ display:flex; flex-direction:column; align-items:center; justify-content:center;
	min-width:74px; padding:0 8px; font-variant-numeric:tabular-nums; color:var(--muted); }
.ls-counter .ls-lbl{ color:var(--muted); }
.ls-counter-num{ font-weight:800; font-size:17px; color:var(--ink); }
.ls-div{ width:1px; align-self:stretch; background:var(--line); margin:4px 4px; }

.ls-bar .ls-tb-full{ background:var(--accent,#e0991a); color:#fff; }
.ls-bar .ls-tb-full:hover{ background:#c8860f; }
.ls-bar .ls-tb-full:active{ background:#b67a0c; }

.ls-exit{ display:none; align-items:center; gap:8px; border:0; cursor:pointer; flex:0 0 auto;
	background:rgba(20,18,14,.85); color:#fff; border-radius:10px;
	padding:9px 14px; font-size:14px; font-weight:700;
	-webkit-tap-highlight-color:transparent; }
.ls-exit:hover{ background:rgba(20,18,14,.95); }
.ls-exit svg{ width:18px; height:18px; }
.ls-reader.ls-isfull .ls-exit{ display:inline-flex; }

.ls-reader-back{ display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; flex:0 0 auto;
	background:rgba(20,18,14,.85); color:#fff; border-radius:10px;
	padding:9px 14px; font-size:14px; font-weight:700;
	-webkit-tap-highlight-color:transparent; }
.ls-reader-back:hover{ background:rgba(20,18,14,.95); }
.ls-reader-back svg{ width:18px; height:18px; flex:0 0 auto; }
/* Icon-only on mobile — the header row can still get tight with a long
   title + the subscription note, so drop the text label first. */
@media (max-width:640px){
	.ls-reader-back span{ display:none; }
	.ls-reader-back{ padding:9px; }
	.ls-head{ padding:8px 10px; }
	.ls-brand b{ font-size:14px; max-width:38vw; }
}

.ls-help{ display:none; position:fixed; inset:0; z-index:9999;
	background:rgba(20,18,14,.55); align-items:center; justify-content:center; padding:18px; }
.ls-help.ls-open{ display:flex; }
.ls-help-card{ position:relative; background:#fff; border-radius:16px; max-width:460px; width:100%;
	max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
	padding:26px 24px 22px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.ls-help-card h2{ font-weight:800; font-size:1.4rem; margin:0 0 6px; }
.ls-help-lead{ margin:0 0 14px; color:#5d574d; font-size:1.02rem; }
.ls-help-tip{ background:#fbf2dd; border:1px solid #f0d99a; border-radius:10px;
	padding:11px 12px !important; margin-bottom:6px; font-weight:600; }
.ls-help-x{ position:absolute; top:12px; right:12px; border:0; background:transparent;
	cursor:pointer; color:#777; padding:6px; border-radius:8px; }
.ls-help-x:hover{ background:#f0ece3; color:#222; }
.ls-help-x svg{ width:22px; height:22px; }
.ls-help-list{ list-style:none; margin:0 0 18px; padding:0; }
.ls-help-list li{ display:flex; align-items:flex-start; gap:12px; padding:9px 0;
	font-size:1.05rem; line-height:1.4; color:#33302b; border-bottom:1px solid #f1ece2; }
.ls-help-list li:last-child{ border-bottom:0; }
.ls-help-ic{ font-size:1.4rem; line-height:1.2; flex:0 0 auto; }
.ls-help-ok{ width:100%; border:0; background:var(--accent,#e0991a); color:#fff;
	font-size:1.05rem; font-weight:700; padding:13px; border-radius:11px; cursor:pointer; }
.ls-help-ok:hover{ background:#c8860f; }

@media (max-width:640px), (max-height:520px){
	.ls-reader{ height:82vh; }
	.ls-nav svg{ display:none; }
	.ls-bar{ bottom:8px; gap:0; padding:4px; border-radius:12px; flex-wrap:nowrap; max-width:98%;
		transition:opacity .25s, transform .25s; }
	.ls-bar .ls-tb{ min-width:36px; min-height:36px; padding:6px; }
	.ls-lbl{ display:none; }
	.ls-div{ display:none; }
	.ls-counter{ min-width:0; padding:0 6px; }
	.ls-counter .ls-lbl{ display:none; }
	.ls-counter-num{ font-size:14px; }
	/* Pinch-to-zoom, double-tap and the swipe gesture already cover these —
	   dropping them (and Abi) from the persistent bar on small screens keeps
	   it to one thin row instead of covering the page. */
	.ls-bar [data-act="help"]{ display:none; }
	/* Auto-hidden after a couple of seconds of inactivity (see viewer.js);
	   tap the page to bring it back. */
	.ls-reader.ls-bar-hidden .ls-bar{ opacity:0; transform:translateX(-50%) translateY(6px); pointer-events:none; }
}
@media (prefers-reduced-motion:reduce){
	.ls-progress > i{ transition:none; }
}