/**
 * Research Magazine Reader - front-end styles.
 * Scoped under .rmr-* so it will not collide with a theme.
 */

.rmr-reader {
	--rmr-accent: #1f5f8b;
	--rmr-bg: #22262b;
	--rmr-bar: #2c3138;
	--rmr-bar-text: #e8ecf1;
	--rmr-height: 78vh;
	--rmr-zoom: 1;
	--rmr-radius: 6px;

	position: relative;
	display: flex;
	flex-direction: column;
	height: var(--rmr-height);
	min-height: 420px;
	margin: 2rem 0;
	background: var(--rmr-bg);
	border-radius: var(--rmr-radius);
	overflow: hidden;
	box-shadow: 0 8px 34px rgba(0, 0, 0, .22);
	color: var(--rmr-bar-text);
	font-family: inherit;
}

.rmr-reader.is-fullscreen {
	--rmr-height: 100vh;
	margin: 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------ toolbar */

.rmr-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .45rem .6rem;
	background: var(--rmr-bar);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	flex: 0 0 auto;
	z-index: 4;
}

.rmr-toolbar-left,
.rmr-toolbar-center,
.rmr-toolbar-right {
	display: flex;
	align-items: center;
	gap: .3rem;
	min-width: 0;
}

.rmr-toolbar-left { flex: 1 1 auto; }
.rmr-toolbar-right { flex: 0 0 auto; }

.rmr-title {
	font-size: .88rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 22ch;
	opacity: .95;
}

.rmr-badge {
	font-size: .66rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .16rem .45rem;
	border-radius: 99px;
	background: var(--rmr-accent);
	color: #fff;
	white-space: nowrap;
}

.rmr-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--rmr-bar-text);
	font-size: 1.05rem;
	line-height: 1;
	padding: .38rem .55rem;
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

.rmr-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.rmr-btn:disabled { opacity: .3; cursor: default; }
.rmr-btn:focus-visible { outline: 2px solid var(--rmr-accent); outline-offset: 1px; }

.rmr-pager {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8rem;
	opacity: .9;
}

.rmr-page-input {
	width: 3.2em;
	padding: .2rem .3rem;
	text-align: center;
	font-size: .8rem;
	color: var(--rmr-bar-text);
	background: rgba(0, 0, 0, .3);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 3px;
}

.rmr-ico {
	display: inline-block;
	width: 15px;
	height: 15px;
	background: currentColor;
	vertical-align: -2px;
}

.rmr-ico-grid { -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='1' width='6' height='6'/><rect x='9' y='1' width='6' height='6'/><rect x='1' y='9' width='6' height='6'/><rect x='9' y='9' width='6' height='6'/></svg>"); }
.rmr-ico-book { -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 2h6v12H1zM9 2h6v12H9z'/></svg>"); }
.rmr-ico-expand { -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 1h6v2H3v4H1zM15 1v6h-2V3H9V1zM1 9h2v4h4v2H1zM13 9h2v6H9v-2h4z'/></svg>"); }

/* --------------------------------------------------------------------- body */

.rmr-body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.rmr-stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	padding: 1.1rem;
	perspective: 2400px;
	outline: none;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
		var(--rmr-bg);
}

.rmr-loading {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .88rem;
	opacity: .85;
}

.rmr-loading.is-error { color: #ffb4ad; }

/* The hidden attribute only sets display:none in the UA stylesheet, so the
   display:flex above beat it and the "Opening issue" spinner stayed on screen
   after the first page had already painted. */
.rmr-loading[hidden] { display: none; }

.rmr-spinner {
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rmr-spin .8s linear infinite;
}

@keyframes rmr-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------- book */

.rmr-book {
	--rmr-ratio: .707;   /* width / height of one page */
	--rmr-pages: 1;      /* 1 for a single page, 2 for a spread */
	--rmr-fit: calc(var(--rmr-ratio) * var(--rmr-pages));

	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;

	/*
	 * Sized to fit the stage in both directions, the way object-fit: contain
	 * would. Before this the book was sized from its height alone, so a
	 * two-page spread was wider than the stage and both outer edges were cut
	 * off. Zoom multiplies it, and anything above 1 scrolls as intended.
	 */
	/*
	 * The height is measured and written by the script, because the fit has to
	 * consider the stage's width and its height at once and CSS cannot see
	 * both without size containment — which collapses this flex row to nothing.
	 * The fallback keeps a sane shape before the first measurement.
	 */
	aspect-ratio: var(--rmr-fit);
	height: var(--rmr-h, calc(100% * var(--rmr-zoom)));
	width: auto;
	max-width: 100%;
	flex: 0 0 auto;

	transform-style: preserve-3d;
	transition: height .2s ease;
}

.rmr-leaf {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
	overflow: hidden;
	flex: 1 1 0;
	min-width: 0;
}

.rmr-leaf img {
	display: block;
	height: 100%;
	width: 100%;
	max-width: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.rmr-leaf canvas { display: none; }

.rmr-leaf.is-empty {
	background: transparent;
	box-shadow: none;
	width: 0;
}

.rmr-reader.is-spread .rmr-leaf-left { border-radius: 3px 0 0 3px; }
.rmr-reader.is-spread .rmr-leaf-right { border-radius: 0 3px 3px 0; }

.rmr-reader.is-spread .rmr-leaf-left::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 26px;
	background: linear-gradient(to left, rgba(0, 0, 0, .22), transparent);
	pointer-events: none;
}

.rmr-reader.is-spread .rmr-leaf-right::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 26px;
	background: linear-gradient(to right, rgba(0, 0, 0, .22), transparent);
	pointer-events: none;
}

.rmr-reader.is-cover .rmr-leaf-right { display: none; }

/* Locked page teaser */

.rmr-leaf.is-locked {
	background: repeating-linear-gradient(135deg, #f4f5f7 0 14px, #eceef1 14px 28px);
	min-width: 260px;
	aspect-ratio: 1 / 1.414;
}

.rmr-leaf.is-locked::before {
	content: attr(data-locked-label);
	position: absolute;
	inset: auto 12% 42% 12%;
	text-align: center;
	color: #4b5563;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
}

.rmr-leaf.is-locked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 34%;
	width: 42px;
	height: 42px;
	margin-left: -21px;
	background: var(--rmr-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3z'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3z'/></svg>") center/contain no-repeat;
}

/* Page flip */

.rmr-flip {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	transform-origin: left center;
	transform-style: preserve-3d;
	pointer-events: none;
	z-index: 3;
}

.rmr-flip-front,
.rmr-flip-back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	background: #fff center/cover no-repeat;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.rmr-flip-back { transform: rotateY(180deg); }

.rmr-flip.is-forward { transform: rotateY(0deg); }
.rmr-flip.is-forward.is-running { transform: rotateY(-172deg); transition: transform .52s cubic-bezier(.42, 0, .3, 1); }

.rmr-flip.is-backward { transform: rotateY(-172deg); }
.rmr-flip.is-backward.is-running { transform: rotateY(0deg); transition: transform .52s cubic-bezier(.42, 0, .3, 1); }

/* Edge click targets */

.rmr-edge {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 12%;
	min-width: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 2;
}

.rmr-edge-prev { left: 0; }
.rmr-edge-next { right: 0; }
.rmr-edge:disabled { cursor: default; }

/* --------------------------------------------------------------- thumbnails */

.rmr-thumbs {
	flex: 0 0 148px;
	overflow-y: auto;
	padding: .6rem;
	background: rgba(0, 0, 0, .25);
	border-right: 1px solid rgba(255, 255, 255, .06);
	display: grid;
	gap: .55rem;
}

.rmr-thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 3px;
	background: #fff;
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	cursor: pointer;
}

.rmr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rmr-thumb-num {
	position: absolute;
	right: 3px;
	bottom: 3px;
	font-size: .62rem;
	padding: .05rem .3rem;
	border-radius: 2px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
}

.rmr-thumb.is-locked { background: repeating-linear-gradient(135deg, #e9ebee 0 8px, #dfe2e6 8px 16px); }

/* --------------------------------------------------------------------- gate */

.rmr-gate {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(16, 18, 21, .78);
	backdrop-filter: blur(3px);
	z-index: 10;
}

.rmr-gate[hidden] { display: none; }

.rmr-gate-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: 100%;
	overflow-y: auto;
	background: #fff;
	color: #1d2229;
	border-radius: 8px;
	padding: 1.6rem 1.5rem 1.35rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.rmr-gate-close {
	position: absolute;
	top: .4rem;
	right: .55rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #96a0ad;
	cursor: pointer;
}

.rmr-gate-title { margin: 0 0 .4rem; font-size: 1.22rem; color: #12161b; }
.rmr-gate-text { margin: 0 0 1.05rem; font-size: .9rem; line-height: 1.5; color: #545e6b; }

.rmr-tabs {
	display: flex;
	gap: .3rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #e3e7ec;
}

.rmr-tab {
	border: 0;
	background: none;
	padding: .5rem .1rem;
	margin-right: 1.1rem;
	font-size: .87rem;
	font-weight: 600;
	color: #7b8593;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.rmr-tab.is-active { color: var(--rmr-accent); border-bottom-color: var(--rmr-accent); }

.rmr-panel { display: none; }
.rmr-panel.is-active { display: block; }

.rmr-panel label {
	display: block;
	margin-bottom: .7rem;
	font-size: .8rem;
	color: #47505c;
}

.rmr-panel label > span { display: block; margin-bottom: .22rem; font-weight: 600; }

.rmr-panel input[type="email"],
.rmr-panel input[type="text"],
.rmr-panel input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: .55rem .65rem;
	font-size: .92rem;
	border: 1px solid #ccd3db;
	border-radius: 5px;
	background: #fff;
	color: #1d2229;
}

.rmr-panel input:focus {
	border-color: var(--rmr-accent);
	outline: 2px solid color-mix(in srgb, var(--rmr-accent) 25%, transparent);
	outline-offset: 0;
}

.rmr-check { display: flex !important; align-items: center; gap: .4rem; }
.rmr-check > span { display: inline !important; font-weight: 400 !important; margin: 0 !important; }

.rmr-submit {
	width: 100%;
	padding: .68rem 1rem;
	margin-top: .3rem;
	border: 0;
	border-radius: 5px;
	background: var(--rmr-accent);
	color: #fff;
	font-size: .93rem;
	font-weight: 600;
	cursor: pointer;
}

.rmr-submit:hover { filter: brightness(1.08); }
.rmr-submit:disabled { opacity: .6; cursor: default; }

.rmr-link {
	display: block;
	width: 100%;
	margin-top: .6rem;
	border: 0;
	background: none;
	font-size: .8rem;
	color: #6b7681;
	text-decoration: underline;
	cursor: pointer;
}

.rmr-feedback { margin: .8rem 0 0; font-size: .82rem; color: #2f6b3d; min-height: 1.1em; }
.rmr-feedback.is-error { color: #b3261e; }
.rmr-note { font-size: .85rem; color: #7a5b12; background: #fdf6e3; padding: .6rem .7rem; border-radius: 5px; }

/* ------------------------------------------------------------------ library */

.rmr-library {
	display: grid;
	grid-template-columns: repeat(var(--rmr-cols, 3), minmax(0, 1fr));
	gap: 1.6rem;
	margin: 1.6rem 0;
}

.rmr-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 25, 35, .1);
	transition: transform .18s ease, box-shadow .18s ease;
}

.rmr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 25, 35, .17); }

.rmr-card-cover { display: block; aspect-ratio: 1 / 1.3; overflow: hidden; background: #eef1f4; }
.rmr-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rmr-card-body { display: block; padding: .85rem 1rem 1.05rem; }
.rmr-card-title { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; }
.rmr-card-meta { display: block; margin-top: .25rem; font-size: .78rem; color: #6d7683; }
.rmr-card-cta { display: block; margin-top: .55rem; font-size: .82rem; font-weight: 600; color: var(--rmr-accent); }

.rmr-error {
	padding: 1rem 1.1rem;
	background: #fdecec;
	border-left: 3px solid #d14343;
	color: #86211c;
	border-radius: 4px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 899px) {
	/*
	 * A portrait page is taller than it is wide, so on a phone the height is
	 * what runs out first. min() keeps the reader inside the screen — 72vh of
	 * a short landscape phone was leaving half the page below the fold — and
	 * the aspect term gives a portrait page room to be read.
	 */
	.rmr-reader { --rmr-height: min(78vh, 128vw); min-height: 340px; }
	.rmr-title { max-width: 12ch; }
	.rmr-thumbs { position: absolute; inset: 0 auto 0 0; z-index: 6; flex-basis: 132px; }
	.rmr-toolbar-right .rmr-spread-toggle { display: none; }

	/* The toolbar has to stay reachable rather than scrolling away with the
	   page, since it holds the only way forward. */
	.rmr-toolbar { flex-wrap: wrap; row-gap: .35rem; }
	.rmr-toolbar-left { flex: 1 1 100%; order: -1; }
}

@media (max-width: 560px) {
	.rmr-library { grid-template-columns: 1fr; }
	.rmr-title { display: none; }
	.rmr-stage { padding: .5rem; }
}

@media print {
	.rmr-reader { display: none !important; }
}