/* =====================================================================
   racunaj.me — inner page design system
   ---------------------------------------------------------------------
   One container, one hero, one breadcrumb, one section rhythm, shared by
   every inner page in the plugin. Tokens come from the theme when it is
   active and fall back to their own values otherwise.
   ===================================================================== */

.rmc-page {
	--rmc-text: var(--text, #eef0ff);
	--rmc-soft: var(--text-soft, #c3c7e8);
	--rmc-dim: var(--text-dim, #9096c2);
	--rmc-blue: var(--neon-blue, #4d7cff);
	--rmc-cyan: var(--neon-blue-2, #63c8f5);
	--rmc-violet: var(--neon-violet, #b46bff);
	--rmc-glass: var(--glass-bg, rgba(255, 255, 255, 0.045));
	--rmc-brd: var(--glass-brd, rgba(255, 255, 255, 0.10));
	--rmc-radius: var(--radius, 22px);
	--rmc-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
	--rmc-grad: var(--grad-brand, linear-gradient(120deg, #4d7cff 0%, #9b5cff 55%, #b46bff 100%));

	/* Rhythm used by every block on the page. */
	--rmc-gap: clamp(48px, 7vw, 88px);

	color: var(--rmc-text);
	padding-bottom: clamp(60px, 8vw, 110px);
}

/* ---------- the one container ---------- */
.rmc-page .site-container,
.site-container {
	width: min(100% - 40px, 1280px);
	margin-inline: auto;
}

@media (max-width: 680px) {
	.rmc-page .site-container,
	.site-container {
		width: min(100% - 32px, 1280px);
	}
}

/* Reading-width variant for single lessons and materials. */
.site-container--narrow {
	width: min(100% - 40px, 880px);
}

/* ---------- inner hero ------------------------------------------------
 * Not 100vh — this is a page opening, not a landing page. It clears the
 * sticky header, gives the title room, and caps the text column so a
 * paragraph never runs the full width of a desktop monitor.
 */
.inner-hero {
	position: relative;
	isolation: isolate;
	/* header height + breathing room */
	padding-top: clamp(120px, 13vw, 168px);
	padding-bottom: clamp(44px, 6vw, 76px);
	margin-bottom: var(--rmc-gap);
	overflow: hidden;
}

.inner-hero__deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.inner-hero__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(120, 130, 220, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 130, 220, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 20%, transparent 78%);
}

.inner-hero__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(680px 320px at 12% 0%, rgba(77, 124, 255, 0.16), transparent 62%),
		radial-gradient(620px 340px at 92% 25%, rgba(155, 92, 255, 0.16), transparent 60%);
}

.inner-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(30px, 4vw, 54px);
	align-items: center;
	/*
	 * No offset: every hero now opens straight with the h1. This used to carry
	 * the gap under the breadcrumb trail, which would read as a hole once the
	 * trail was removed.
	 */
	margin-top: 0;
}

.inner-hero--split .inner-hero__grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.inner-hero__content { min-width: 0; }

.inner-hero__title {
	font-size: clamp(2rem, 4.2vw, 3.15rem);
	line-height: 1.14;
	letter-spacing: -0.032em;
	/* Keeps a long title from stretching across the whole monitor. */
	max-width: 18ch;
	margin: 0 0 18px;
	text-wrap: balance;
}

/* 16ch broke this title over four short lines; 21ch gives it two or three. */
.inner-hero--split .inner-hero__title { max-width: 21ch; }

/*
 * The external exam reads as the more serious section of the site: a colder
 * glow and a denser grid, no new components.
 */
.inner-hero--ext .inner-hero__glow {
	background:
		radial-gradient(760px 340px at 8% 0%, rgba(82, 226, 251, 0.15), transparent 62%),
		radial-gradient(680px 360px at 96% 20%, rgba(77, 124, 255, 0.18), transparent 60%);
}

.inner-hero--ext .inner-hero__grid-lines { background-size: 44px 44px; }

.inner-hero__lead {
	font-size: clamp(1.02rem, 1.25vw, 1.18rem);
	line-height: 1.72;
	color: var(--rmc-soft);
	max-width: 62ch;
	margin: 0;
}

.inner-hero__meta {
	margin: 14px 0 0;
	font-size: 0.9rem;
	color: var(--rmc-dim);
}

/* Hero image: framed and capped, never a full-bleed photo. */
.inner-hero__visual { min-width: 0; }

.inner-hero__frame {
	position: relative;
	padding: 7px;
	border-radius: 24px;
	background: var(--rmc-glass);
	border: 1px solid var(--rmc-brd);
	box-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.9), 0 0 46px rgba(155, 92, 255, 0.18);
	/* 540px pushed the hero past 690px tall; 480 keeps it inside the target. */
	max-width: 480px;
	margin-inline: auto;
}

.inner-hero__frame::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 25px;
	padding: 1.5px;
	background: var(--rmc-grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0.6;
	pointer-events: none;
}

.inner-hero__frame img {
	display: block;
	width: 100%;
	height: auto;
	/* 3:2 — the faces stay intact, the photo stays a sensible size. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center 38%;
	border-radius: 18px;
	filter: contrast(1.04) saturate(1.06);
}

/* Section rhythm, shared by every block. */
.rmc-section { margin-bottom: var(--rmc-gap); }
.rmc-section:last-of-type { margin-bottom: 0; }

/* Standalone note paragraph inside a section. */
.rmc-note {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--rmc-soft);
	max-width: 62ch;
	margin: 0 0 26px;
}
/* ---------- page blocks ---------- */
.rmc-block { margin-bottom: var(--rmc-gap); }
.rmc-block:last-of-type { margin-bottom: 0; }

/* Single lesson / material read at the narrow measure. */
.rmc-block--narrow > .site-container { width: min(100% - 40px, 880px); }

.rmc-sechead {
	max-width: 62ch;
	margin-bottom: clamp(24px, 3vw, 38px);
}

.rmc-sechead__title {
	font-size: clamp(1.5rem, 2.5vw, 2.05rem);
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin: 0 0 12px;
}

.rmc-sechead__lead {
	font-size: 1.04rem;
	line-height: 1.75;
	color: var(--rmc-soft);
	margin: 0;
}

/* Body copy anywhere inside a block keeps a readable measure. */
.rmc-block p { max-width: 68ch; line-height: 1.75; }

/* ---------- empty state ---------- */
.rmc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	padding: clamp(34px, 5vw, 54px) 26px;
	border-radius: var(--rmc-radius);
	border: 1px dashed var(--rmc-brd);
	background:
		radial-gradient(420px 200px at 50% 0%, rgba(77, 124, 255, 0.09), transparent 65%),
		var(--rmc-glass);
}

.rmc-empty__mark {
	color: var(--rmc-cyan);
	opacity: 0.55;
}

.rmc-empty__mark svg { width: 46px; height: 46px; }

.rmc-empty__text {
	color: var(--rmc-soft);
	margin: 0;
	max-width: 46ch;
	font-size: 1rem;
}

/* ---------- mission blocks (O nama) ---------- */
.rmc-mission {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

.rmc-mission__item {
	position: relative;
	padding: 26px 24px 26px 26px;
	border-radius: 18px;
	background: var(--rmc-glass);
	border: 1px solid var(--rmc-brd);
}

/* A quiet gradient edge instead of a heavy card outline. */
.rmc-mission__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	bottom: 22px;
	width: 2px;
	border-radius: 2px;
	background: var(--rmc-grad);
	opacity: 0.7;
}

.rmc-mission__item h3 {
	font-size: 1.1rem;
	margin: 0 0 10px;
	letter-spacing: -0.02em;
}

.rmc-mission__item p {
	margin: 0;
	color: var(--rmc-soft);
	font-size: 0.97rem;
	line-height: 1.72;
}

/* ---------- numbered principles ---------- */
.rmc-principles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px;
	counter-reset: rmc-principle;
}

.rmc-principle {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.rmc-principle__no {
	flex: none;
	font-family: var(--font-mono, ui-monospace, Menlo, monospace);
	font-size: 0.86rem;
	line-height: 1;
	padding-top: 6px;
	background: var(--rmc-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	/* descender room for the gradient text */
	padding-bottom: 0.14em;
}

.rmc-principle__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.rmc-principle__name {
	font-weight: 600;
	font-size: 1.06rem;
	letter-spacing: -0.02em;
}

.rmc-principle__text {
	color: var(--rmc-soft);
	font-size: 0.95rem;
	line-height: 1.7;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.inner-hero--split .inner-hero__grid { grid-template-columns: 1fr; }
	.inner-hero__title,
	.inner-hero--split .inner-hero__title { max-width: none; }
	.inner-hero__visual { order: 2; }
	.inner-hero__content { order: 1; }
	.inner-hero__frame { max-width: 460px; }
}

@media (max-width: 680px) {
	.inner-hero {
		padding-top: clamp(104px, 22vw, 132px);
		padding-bottom: 34px;
	}
	.inner-hero__grid { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.rmc-page *,
	.rmc-page *::before,
	.rmc-page *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* =====================================================================
   ZADACI I TESTOVI
   ===================================================================== */

.inner-hero__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--neon-cyan, #52e2fb);
}

/* ---------- the four class cards ---------- */
.rmc-grades {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.rmc-grade {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: var(--radius, 22px);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	background: linear-gradient(165deg, rgba(23, 19, 58, 0.7), rgba(11, 9, 32, 0.82));
	backdrop-filter: blur(14px);
	box-shadow: var(--shadow-lg, 0 30px 80px -30px rgba(0, 0, 0, 0.9));
	transition: transform 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
		border-color 0.35s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The big numeral, sitting behind the text as a watermark rather than
   competing with it. Decorative, and hidden from assistive technology in
   the markup — the heading right beside it already says the class. */
.rmc-grade__num {
	position: absolute;
	right: -6px;
	top: -22px;
	z-index: -1;
	font-size: 8rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	opacity: 0.12;
	background: var(--grad-brand, linear-gradient(120deg, #4d7cff, #b46bff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Four accents inside one palette, so the row reads as a set rather than
   four unrelated cards. */
.rmc-grade--1 { --g: #52e2fb; }
.rmc-grade--2 { --g: #4d7cff; }
.rmc-grade--3 { --g: #9b5cff; }
.rmc-grade--4 { --g: #b46bff; }

.rmc-grade::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--g, #4d7cff) 45%, transparent);
}

.rmc-grade:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--g, #4d7cff) 45%, transparent);
}

.rmc-grade__name {
	margin: 0 0 8px;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	letter-spacing: -0.02em;
}

/* The whole card is clickable, but the link itself is the heading — so the
   keyboard reaches one target with a name, not an unlabelled block. */
.rmc-grade__name a {
	color: inherit;
	text-decoration: none;
}

.rmc-grade__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.rmc-grade__name a:focus-visible {
	outline: 2px solid var(--neon-cyan, #52e2fb);
	outline-offset: 4px;
}

.rmc-grade__note {
	margin: 0 0 16px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--text-dim, #9096c2);
}

.rmc-grade__count {
	margin: auto 0 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--g, #4d7cff);
}

.rmc-grade__soon {
	color: var(--text-dim, #9096c2);
	font-weight: 500;
}

.rmc-grade__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--text, #eef0ff);
}

.rmc-grade__cta svg { width: 17px; height: 17px; }

/* ---------- filters ----------
 * A scrolling row on a phone. The scroller carries the overflow, so the
 * page itself never moves sideways. */
.rmc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: clamp(20px, 2.6vw, 30px);
}

.rmc-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	color: var(--text-soft, #c3c7e8);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	background: rgba(15, 12, 42, 0.7);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.rmc-filter:hover { border-color: rgba(82, 226, 251, 0.5); color: var(--text, #eef0ff); }

.rmc-filter:focus-visible {
	outline: 2px solid var(--neon-cyan, #52e2fb);
	outline-offset: 2px;
}

/* The active one is not only a colour: it also carries aria-current in the
   markup, and its counter chip inverts. */
.rmc-filter.is-on {
	color: #fff;
	border-color: transparent;
	background: var(--grad-brand, linear-gradient(120deg, #4d7cff, #b46bff));
}

.rmc-filter__n {
	font-size: 0.76rem;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.rmc-filter--flag::before {
	content: "\2713";
	font-weight: 700;
}

/* ---------- the document grid ---------- */
.rmc-mat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	align-items: start;
}

.rmc-backlink {
	margin: 0;
	font-size: 0.9rem;
}

.rmc-backlink a { color: var(--neon-cyan, #52e2fb); }

@media (max-width: 620px) {

	/* Below this the wrapped rows get taller than the content they filter,
	   so the row scrolls instead. */
	.rmc-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}

	.rmc-filter {
		flex: none;
		scroll-snap-align: start;
	}

	.rmc-grade__num { font-size: 6rem; }
}

@media (prefers-reduced-motion: reduce) {

	.rmc-grade,
	.rmc-filter { transition: none; }

	.rmc-grade:hover { transform: none; }
}

/* ---------- PDF card ----------
 * Taller than a video card on purpose: a document is a page, and an A4
 * proportion reads as one before a single word is read. */
.rmc-pdf-visual {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, rgba(30, 24, 74, 0.9), rgba(12, 10, 34, 0.95));
}

.rmc-pdf-visual img,
.rmc-pdf-visual .rmc-pdf-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The drawn stand-in is a whole sheet, so it is contained rather than
   cropped — cover would cut the ruled lines off centre. */
.rmc-pdf-visual--drawn .rmc-pdf-ph { object-fit: contain; }

/* Weaker than the tint over a YouTube thumbnail: that one covers artwork,
   this one covers the first page of a worksheet, and the text on it has to
   stay legible. */
.rmc-pdf-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(150deg, rgba(41, 25, 105, 0.3), rgba(119, 50, 220, 0.16));
}

.rmc-card--pdf:hover .rmc-pdf-visual img,
.rmc-card--pdf:hover .rmc-pdf-visual .rmc-pdf-ph {
	transform: scale(1.03);
}

.rmc-card__facts {
	margin: 0 0 8px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--text-dim, #9096c2);
}

.rmc-card__solutions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 3px 10px 3px 7px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 600;
	color: #7ef0c2;
	border: 1px solid rgba(126, 240, 194, 0.4);
	background: rgba(126, 240, 194, 0.1);
}

.rmc-card__solutions svg { width: 13px; height: 13px; }

.rmc-card__foot--pdf {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rmc-card__missing {
	font-size: 0.84rem;
	color: var(--text-dim, #9096c2);
}

/* ---------- one document ---------- */
.rmc-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 0.84rem;
	color: var(--text-dim, #9096c2);
}

.rmc-crumbs a { color: var(--neon-cyan, #52e2fb); text-decoration: none; }
.rmc-crumbs a:hover { text-decoration: underline; }

.rmc-solutions-note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 20px;
	padding: 9px 16px;
	border-radius: 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #7ef0c2;
	border: 1px solid rgba(126, 240, 194, 0.4);
	background: rgba(126, 240, 194, 0.09);
}

.rmc-solutions-note svg { width: 17px; height: 17px; flex: none; }

.rmc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
}

.rmc-actions .rmc-btn svg { width: 17px; height: 17px; }

/* ---------- the viewer ----------
 * Height in dvh, not vh: on a phone the mobile toolbars are part of vh, and
 * the bottom of the document ends up under them. */
.rmc-viewer {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	height: min(82dvh, 900px);
	border-radius: var(--radius, 22px);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	background: rgba(12, 10, 34, 0.9);
	box-shadow: var(--shadow-lg, 0 30px 80px -30px rgba(0, 0, 0, 0.9));
}

.rmc-viewer__obj,
.rmc-viewer__frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.rmc-viewer__fallback {
	margin: 0;
	padding: 28px;
	font-size: 0.94rem;
	line-height: 1.7;
	color: var(--text-soft, #c3c7e8);
}

.rmc-viewer__fallback a { color: var(--neon-cyan, #52e2fb); }

@media (max-width: 1024px) {
	.rmc-viewer { height: min(72dvh, 760px); }
}

@media (max-width: 620px) {

	.rmc-viewer { height: min(62dvh, 560px); }

	/* Two full-width actions rather than two cramped ones side by side. */
	.rmc-actions .rmc-btn { width: 100%; }

	.rmc-card__foot--pdf .rmc-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {

	.rmc-pdf-visual img,
	.rmc-pdf-visual .rmc-pdf-ph { transition: none; }

	.rmc-card--pdf:hover .rmc-pdf-visual img,
	.rmc-card--pdf:hover .rmc-pdf-visual .rmc-pdf-ph { transform: none; }
}

/* =====================================================================
   DOCUMENT READER
   ---------------------------------------------------------------------
   A page at a time, drawn to a canvas. The old embed filled the whole
   column and let the browser stretch one bitmap across it; this is
   narrower on purpose — a sheet of A4 read at arm's length, not a
   document blown up to fill a monitor.
   ===================================================================== */

.rmc-reader {
	/* The number that fixes "preširok": a column, not the whole content
	   width. Above this an A4 page stops being easier to read and only
	   gets bigger. */
	max-width: 920px;
	margin-inline: auto;
	padding: clamp(14px, 1.8vw, 22px);
	border-radius: var(--radius, 22px);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	background: linear-gradient(165deg, rgba(23, 19, 58, 0.72), rgba(11, 9, 32, 0.88));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow:
		0 34px 80px -40px rgba(0, 0, 0, 0.95),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rmc-reader:focus-visible {
	outline: 2px solid var(--neon-cyan, #52e2fb);
	outline-offset: 4px;
}

.rmc-reader__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 320px;
	overflow: auto;
	border-radius: 14px;
	background: #0c0a22;
}

/* Before the first page arrives the stage holds an A4 shape, so the page
   does not jump when the canvas gets its real height. */
.rmc-reader:not(.is-ready) .rmc-reader__stage { aspect-ratio: 1 / 1.414; }

.rmc-reader__canvas {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.9);
}

/* The page turn: a hint, not a performance. */
.rmc-reader__canvas.is-turning {
	opacity: 0.35;
	transform: translateX(6px);
	transition: none;
}

.rmc-reader__canvas {
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.rmc-reader__status {
	position: absolute;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 0.86rem;
	color: var(--text-soft, #c3c7e8);
	background: rgba(12, 10, 34, 0.9);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
}

.rmc-reader.is-error .rmc-reader__status {
	color: #ff9a9a;
	border-color: rgba(255, 130, 130, 0.45);
}

.rmc-reader__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.rmc-reader__btn {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--text-soft, #c3c7e8);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	background: rgba(15, 12, 42, 0.8);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.rmc-reader__btn svg { width: 19px; height: 19px; }

.rmc-reader__btn:hover:not(:disabled) {
	color: var(--text, #eef0ff);
	border-color: rgba(82, 226, 251, 0.5);
}

.rmc-reader__btn:focus-visible {
	outline: 2px solid var(--neon-cyan, #52e2fb);
	outline-offset: 2px;
}

.rmc-reader__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.rmc-reader__page {
	margin: 0;
	min-width: 78px;
	text-align: center;
	font-size: 0.88rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text, #eef0ff);
}

.rmc-reader__sep {
	width: 1px;
	height: 24px;
	margin: 0 4px;
	background: var(--glass-brd, rgba(255, 255, 255, 0.1));
}

@media (max-width: 620px) {

	.rmc-reader { padding: 10px; }

	/* The zoom controls go: pinch does the same job better, and eight
	   targets on one row leaves none of them big enough to hit. */
	.rmc-reader__sep,
	.rmc-reader__btn[data-rmc-zoom-in],
	.rmc-reader__btn[data-rmc-zoom-out],
	.rmc-reader__btn[data-rmc-zoom-reset] { display: none; }

	.rmc-reader__btn { min-width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {

	.rmc-reader__canvas,
	.rmc-reader__btn { transition: none; }

	.rmc-reader__canvas.is-turning { opacity: 1; transform: none; }
}

/* =====================================================================
   THE OVERLAY READER
   ===================================================================== */

.rmc-fb {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: clamp(10px, 2vw, 28px);
	padding-top: max(clamp(10px, 2vw, 28px), env(safe-area-inset-top));
	padding-bottom: max(clamp(10px, 2vw, 28px), env(safe-area-inset-bottom));
}

.rmc-fb[hidden] { display: none; }

.rmc-fb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 3, 14, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.rmc-fb__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, 1080px);
	/* dvh first: on a phone the toolbars are part of vh, and the toolbar of
	   the reader would sit under them. The vh line is the fallback for
	   browsers that do not know dvh. */
	height: 100vh;
	height: min(94dvh, 1200px);
	max-height: 100%;
	border-radius: clamp(16px, 2vw, 24px);
	border: 1px solid rgba(137, 101, 255, 0.34);
	background: linear-gradient(165deg, rgba(23, 19, 58, 0.92), rgba(9, 7, 26, 0.96));
	box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 90px -50px rgba(120, 90, 255, 0.8);
	overflow: hidden;
}

.rmc-fb__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px clamp(14px, 2vw, 22px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rmc-fb__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	line-height: 1.35;
	color: var(--text, #eef0ff);
	/* Two lines, then an ellipsis: a long worksheet title must not push the
	   document out of the dialog. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rmc-fb__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	place-items: center;
	padding: clamp(8px, 1.4vw, 16px);
	overflow: auto;
	background: #0b0920;
}

.rmc-fb__canvas {
	display: block;
	max-width: 100%;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.95);
	transition: opacity 0.26s ease, transform 0.26s ease;
}

.rmc-fb.is-turning .rmc-fb__canvas {
	opacity: 0.3;
	transform: translateX(8px);
}

.rmc-fb__note {
	position: absolute;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 0.86rem;
	color: var(--text-soft, #c3c7e8);
	background: rgba(12, 10, 34, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.rmc-fb__note[hidden] { display: none; }
.rmc-fb.is-error .rmc-fb__note { color: #ff9a9a; border-color: rgba(255, 130, 130, 0.5); }

.rmc-fb__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	padding: 12px clamp(12px, 2vw, 20px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rmc-fb__btn {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--text-soft, #c3c7e8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(15, 12, 42, 0.85);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.rmc-fb__btn svg { width: 19px; height: 19px; }

.rmc-fb__btn:hover:not(:disabled) {
	color: var(--text, #eef0ff);
	border-color: rgba(82, 226, 251, 0.55);
}

.rmc-fb__btn:focus-visible {
	outline: 2px solid var(--neon-cyan, #52e2fb);
	outline-offset: 2px;
}

.rmc-fb__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rmc-fb__btn[hidden] { display: none; }

.rmc-fb__count {
	margin: 0;
	min-width: 76px;
	text-align: center;
	font-size: 0.88rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text, #eef0ff);
}

.rmc-fb__sep {
	width: 1px;
	height: 24px;
	margin: 0 3px;
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 620px) {

	.rmc-fb { padding: 0; }

	.rmc-fb__dialog {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		border: 0;
	}

	/* Zoom goes: pinch does it better, and nine targets in one row leaves
	   none of them big enough for a thumb. */
	.rmc-fb__sep,
	.rmc-fb__btn[data-rmc="in"],
	.rmc-fb__btn[data-rmc="out"],
	.rmc-fb__btn[data-rmc="reset"] { display: none; }

	.rmc-fb__btn { min-width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {

	.rmc-fb__canvas,
	.rmc-fb__btn { transition: none; }

	.rmc-fb.is-turning .rmc-fb__canvas { opacity: 1; transform: none; }
}

/* ---------- four documents to a row ----------
 * The grid was auto-fit at minmax(260px, 1fr), which on a 1180 px container
 * settles at three wide cards. Four fixed columns make each card about the
 * size of the sheet it depicts, and the row scans as a shelf rather than as
 * three posters. */
.rmc-mat-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 20px);
}

.rmc-mat-grid .rmc-card__body { padding: 14px 15px; }

.rmc-mat-grid .rmc-card__title {
	font-size: 0.98rem;
	line-height: 1.35;
}

.rmc-mat-grid .rmc-card__facts {
	font-size: 0.76rem;
	margin-bottom: 6px;
}

.rmc-mat-grid .rmc-card__solutions {
	font-size: 0.7rem;
	padding: 2px 8px 2px 6px;
	margin-bottom: 10px;
}

.rmc-mat-grid .rmc-btn--sm {
	padding: 7px 12px;
	font-size: 0.8rem;
	min-height: 38px;
}

@media (max-width: 1180px) {
	.rmc-mat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.rmc-mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.rmc-mat-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The published timetable picture on the IX-c page. */
.rmc-raspored-slika {
	margin: 0;
	border-radius: var(--radius, 22px);
	overflow: hidden;
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	box-shadow: var(--shadow-lg, 0 30px 80px -30px rgba(0, 0, 0, 0.9));
}

.rmc-raspored-slika img {
	display: block;
	width: 100%;
	height: auto;
}

/* The image, folded under the table. */
.rmc-raspored-toggle {
	margin-top: 22px;
}

.rmc-raspored-toggle > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.88rem;
	font-weight: 600;
	list-style: none;
	color: var(--text-soft, #c3c7e8);
	border: 1px solid var(--glass-brd, rgba(255, 255, 255, 0.1));
	background: rgba(15, 12, 42, 0.7);
	transition: color 0.22s ease, border-color 0.22s ease;
}

/* Safari draws its own triangle through a pseudo-element the standard rule
   does not reach. */
.rmc-raspored-toggle > summary::-webkit-details-marker { display: none; }

.rmc-raspored-toggle > summary::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}

.rmc-raspored-toggle[open] > summary::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.rmc-raspored-toggle > summary:hover {
	color: var(--text, #eef0ff);
	border-color: rgba(82, 226, 251, 0.5);
}

.rmc-raspored-toggle > summary:focus-visible {
	outline: 2px solid var(--neon-cyan, #52e2fb);
	outline-offset: 3px;
}

.rmc-raspored-toggle .rmc-raspored-slika { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
	.rmc-raspored-toggle > summary,
	.rmc-raspored-toggle > summary::before { transition: none; }
}