/* ============================================================
   Himalayan Express ePaper — clean reader
   Every rule is scoped under #he-app so a WordPress theme's
   styles can't override the layout (fixes giant text / plain
   buttons). Red & white on dark.
   ============================================================ */

#he-app{
	--he-accent:#c8102e;
	--he-accent-dark:#9e0b22;
	--he-bg:#1f2023;
	--he-panel:#292a2e;
	--he-btn:#3a3b40;
	--he-btn-hover:#48494f;
	--he-text:#f4f4f5;
	--he-text-soft:#a7a8ad;
	--he-line:#3c3d42;

	box-sizing:border-box;
	background:var(--he-bg);
	color:var(--he-text);
	font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
	font-size:16px;
	display:flex;flex-direction:column;
	min-height:100vh;
	min-height:100dvh; /* fixes extra blank space at the bottom on mobile browsers */
	-webkit-font-smoothing:antialiased;
	position:relative;
}
html:has(body.he-standalone),
body.he-standalone{
	margin:0;padding:0;height:100%;background:#1f2023;
}
#he-app[data-theme="light"]{
	--he-bg:#f3f1ec;
	--he-panel:#ffffff;
	--he-btn:#f0eee9;
	--he-btn-hover:#e6e2d9;
	--he-text:#1a1712;
	--he-text-soft:#6b6459;
	--he-line:#e2ddd2;
}

/* ---- reset (beats theme) ---- */
#he-app *,#he-app *::before,#he-app *::after{box-sizing:border-box}
#he-app button{background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;line-height:normal;box-shadow:none;text-transform:none}
#he-app a{text-decoration:none;color:inherit}
#he-app img{max-width:100%;height:auto;display:block}
#he-app span,#he-app div,#he-app p,#he-app h1,#he-app h3{margin:0;padding:0;line-height:normal;letter-spacing:normal;text-transform:none}
#he-app svg{display:block}

/* ================= HEADER ================= */
#he-app .he-top{
	background:var(--he-panel);
	border-bottom:1px solid var(--he-line);
	display:flex;align-items:center;justify-content:space-between;
	padding:10px 20px;gap:16px;flex-wrap:nowrap;
}
#he-app .he-brand{display:flex;flex-direction:column;justify-content:center;line-height:1;min-width:0}
#he-app .he-brand--logo{padding:2px 0}
#he-app .he-brand__img{max-height:42px;width:auto}
#he-app .he-brand__name{
	font-family:"Playfair Display","Times New Roman",serif;font-weight:900;
	font-size:22px;line-height:1;color:var(--he-text);white-space:nowrap;
}
#he-app .he-brand__tag{
	margin-top:3px;font-size:9px;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--he-accent);white-space:nowrap;
}

#he-app .he-top__actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
#he-app .he-abtn{
	width:42px;height:38px;border-radius:9px;
	background:var(--he-btn);color:var(--he-text);
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--he-line);
	transition:transform .16s,background .16s,color .16s;
}
#he-app .he-abtn:hover{transform:translateY(-2px);background:var(--he-btn-hover)}
#he-app .he-abtn--day{color:#f6c445}
#he-app .he-abtn--archive:hover,#he-app .he-abtn--dl:hover,#he-app .he-abtn--share:hover{background:var(--he-accent);color:#fff;border-color:var(--he-accent)}
#he-app .he-ico-moon{display:none}
#he-app[data-theme="light"] .he-ico-sun{display:none}
#he-app[data-theme="light"] .he-ico-moon{display:block}

/* ================= VIEWER ================= */
#he-app .he-viewer{
	flex:1;position:relative;min-height:70vh;
	display:flex;align-items:stretch;justify-content:center;
}
#he-app .he-stage{
	flex:1;overflow:auto;
	display:flex;align-items:flex-start;justify-content:center;
	padding:22px;cursor:grab;position:relative;scrollbar-width:thin;
	-webkit-overflow-scrolling:touch;
}
#he-app .he-stage.is-panning{cursor:grabbing}
#he-app .he-canvas-wrap{
	display:inline-block;line-height:0;background:#fff;border-radius:2px;
	box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
	animation:he-page-in .4s cubic-bezier(.2,.7,.2,1);
	cursor:pointer;transition:box-shadow .2s;
}
#he-app .he-canvas-wrap:hover{box-shadow:0 24px 60px -16px rgba(0,0,0,.7)}
@keyframes he-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#he-app .he-canvas{display:block;border-radius:2px}

/* side arrows — absolutely centered over the paper, all screens */
#he-app .he-arrow{
	position:absolute;top:50%;transform:translateY(-50%);z-index:6;
	width:46px;height:60px;border-radius:10px;
	background:var(--he-accent);color:#fff;
	display:inline-flex;align-items:center;justify-content:center;
	box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
	transition:transform .16s,background .16s,opacity .16s;
}
#he-app .he-arrow--left{left:16px}
#he-app .he-arrow--right{right:16px}
#he-app .he-arrow:hover{background:var(--he-accent-dark);transform:translateY(-50%) scale(1.06)}
#he-app .he-arrow:disabled{opacity:0;pointer-events:none}

/* loading + empty */
#he-app .he-loading,#he-app .he-empty{
	position:absolute;inset:0;display:flex;flex-direction:column;
	align-items:center;justify-content:center;gap:12px;
	color:var(--he-text-soft);font-size:13px;background:var(--he-bg);z-index:2;
	overflow:auto;padding:24px 16px;
}
#he-app .he-loading__spinner{
	width:34px;height:34px;border-radius:50%;
	border:3px solid var(--he-line);border-top-color:var(--he-accent);
	animation:he-spin .8s linear infinite;
}
@keyframes he-spin{to{transform:rotate(360deg)}}
#he-app .he-empty p{font-weight:700;color:var(--he-text);font-size:15px}
#he-app .he-empty span{font-size:12px}
#he-app .he-empty svg{color:var(--he-accent)}
#he-app .he-loading[hidden],#he-app .he-empty[hidden]{display:none}

/* admin-only diagnostic panel */
#he-app .he-debug{
	margin-top:22px;max-width:640px;width:92vw;text-align:left;
	background:var(--he-panel);border:1px solid var(--he-accent);border-radius:10px;
	padding:14px 16px;font-size:12px;
}
#he-app .he-debug__title{font-weight:700;color:var(--he-accent);margin-bottom:8px;font-size:12.5px}
#he-app .he-debug__table{width:100%;border-collapse:collapse;font-size:11.5px}
#he-app .he-debug__table th,#he-app .he-debug__table td{
	text-align:left;padding:6px 8px;border-bottom:1px solid var(--he-line);color:var(--he-text-soft);
}
#he-app .he-debug__table th{color:var(--he-text);font-weight:700}
#he-app .he-debug__table td:first-child{color:var(--he-text)}
#he-app .he-debug__bad{color:var(--he-accent);font-weight:700}
#he-app .he-debug__hint{margin-top:10px;color:var(--he-text-soft);line-height:1.5}
#he-app .he-debug__line{color:var(--he-text-soft)}

/* ================= BOTTOM TOOLBAR ================= */
#he-app .he-bottom{
	background:var(--he-panel);border-top:1px solid var(--he-line);
	display:flex;align-items:stretch;justify-content:center;gap:8px;
	padding:9px 14px;flex-wrap:nowrap;
}
#he-app .he-bbtn{
	background:var(--he-btn);border:1px solid var(--he-line);border-radius:10px;
	min-width:90px;padding:8px 12px;
	display:flex;flex-direction:column;align-items:center;gap:4px;
	font-size:12px;font-weight:600;color:var(--he-text);
	transition:transform .15s,background .15s,color .15s;
}
#he-app button.he-bbtn:hover{transform:translateY(-2px);background:var(--he-btn-hover);color:var(--he-accent)}
#he-app .he-bbtn:disabled{opacity:.4;cursor:default;transform:none;color:var(--he-text-soft)}
#he-app .he-bbtn--page{color:var(--he-accent);cursor:default;background:transparent;border-color:transparent}
#he-app .he-bbtn--page span{color:var(--he-accent)}

/* ================= FOOTER ================= */
#he-app .he-credit{
	background:var(--he-panel);border-top:1px solid var(--he-line);
	text-align:center;padding:13px 16px;font-size:12.5px;color:var(--he-text-soft);
}

/* ================= MODAL / CALENDAR ================= */
#he-app .he-modal{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;padding:20px}
#he-app .he-modal[hidden]{display:none}
#he-app .he-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);animation:he-fade .2s ease both}
#he-app .he-modal__panel{
	position:relative;width:min(420px,94vw);background:var(--he-panel);
	border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
	padding:22px;border:1px solid var(--he-line);
	animation:he-pop .28s cubic-bezier(.2,.8,.2,1) both;color:var(--he-text);
}
@keyframes he-fade{from{opacity:0}to{opacity:1}}
@keyframes he-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
#he-app .he-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#he-app .he-modal__head h3{font-family:"Playfair Display",serif;font-weight:700;font-size:20px}
#he-app .he-iconbtn{
	width:38px;height:38px;border-radius:50%;border:1px solid var(--he-line);
	display:inline-flex;align-items:center;justify-content:center;color:var(--he-text);
	background:var(--he-btn);transition:background .16s,color .16s,transform .16s;
}
#he-app .he-iconbtn:hover{background:var(--he-accent);color:#fff;transform:translateY(-1px)}
#he-app .he-iconbtn--close{width:34px;height:34px}
#he-app .he-cal__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#he-app .he-cal__month{font-weight:700;font-size:15px}
#he-app .he-cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
#he-app .he-cal__dow span{text-align:center;font-size:11px;font-weight:700;color:var(--he-text-soft)}
#he-app .he-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
#he-app .he-day{
	aspect-ratio:1;border-radius:9px;position:relative;
	display:flex;align-items:center;justify-content:center;
	font-size:13.5px;color:var(--he-text);transition:background .15s,transform .15s;
}
#he-app .he-day--empty{visibility:hidden}
#he-app .he-day--muted{color:var(--he-text-soft);opacity:.45}
#he-app .he-day--available{cursor:pointer;font-weight:700}
#he-app .he-day--available::after{
	content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
	width:5px;height:5px;border-radius:50%;background:var(--he-accent);
}
#he-app .he-day--available:hover{background:var(--he-btn);transform:scale(1.07)}
#he-app .he-day--today{outline:1.5px solid var(--he-accent);outline-offset:-1.5px}
#he-app .he-day--selected{background:var(--he-accent);color:#fff}
#he-app .he-day--selected::after{background:#fff}
#he-app .he-cal__legend{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--he-text-soft)}
#he-app .he-cal__legend-dot{width:6px;height:6px;border-radius:50%;background:var(--he-accent);display:inline-block}

@media(prefers-reduced-motion:reduce){#he-app .he-canvas-wrap{animation:none}}

/* ================= MOBILE ================= */
@media(max-width:640px){
	#he-app .he-top{padding:9px 12px;gap:10px}
	#he-app .he-brand__img{max-height:34px}
	#he-app .he-brand__name{font-size:17px}
	#he-app .he-brand__tag{font-size:8px}
	#he-app .he-abtn{width:38px;height:36px}
	#he-app .he-arrow{width:38px;height:52px}
	#he-app .he-arrow--left{left:6px}
	#he-app .he-arrow--right{right:6px}
	#he-app .he-stage{padding:12px 8px}
	#he-app .he-bottom{gap:5px;padding:8px 6px}
	#he-app .he-bbtn{min-width:0;flex:1 1 0;padding:7px 4px;font-size:10px;gap:3px;border-radius:8px}
	#he-app .he-bbtn span{white-space:nowrap}
	#he-app .he-credit{font-size:11px;padding:11px 12px}
}