/*
 * Document - Book.
 *
 * Read from cp-all-designer css/about-us-memorandum.css (.mobk),
 * css/about-us-articles.css (.arbk, the same rules) and css/doc-viewer.css
 * (.docv), with the tokens of css/app.css they use.
 *
 * What the Style tab sets arrives through the widget's selectors; a size
 * left empty there scales with the window the way the design's does,
 * through the two numbers below (app.css:127-128, 2889-2900).
 */

.custom-document-book {
	--custom-vwu: 14.4px;
	--custom-vhu: clamp(5.2px, 1svh, 9px);
	--custom-pad: 90px;
	position: relative;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	/* app.css:385-389 .sec--rhythm, .container --pad */
	padding: min(clamp(52px, calc(8.6 * var(--custom-vwu)), 160px), calc(13.7 * var(--custom-vhu))) var(--custom-pad);
	background-color: var(--custom-mobk-b, #0E1E54);
	background-image: linear-gradient(180deg, var(--custom-mobk-a, #16418C) 0%, var(--custom-mobk-b, #0E1E54) 100%);
	color: #FFFFFF;
	text-align: center;
	letter-spacing: normal;
}

@media (max-width: 1280px) { .custom-document-book { --custom-vwu: 12.2px; --custom-vhu: clamp(5.2px, 1svh, 8.5px); } }
@media (max-width: 1200px) { .custom-document-book { --custom-vwu: 11.2px; --custom-vhu: clamp(5.2px, 1svh, 8.35px); } }
@media (max-width: 1024px) { .custom-document-book { --custom-vwu: 9.2px; --custom-vhu: clamp(5.2px, 1svh, 8px); --custom-pad: 40px; } }
@media (max-width: 860px)  { .custom-document-book { --custom-vwu: 7.7px; --custom-vhu: clamp(5.2px, 1svh, 7.8px); } }
@media (max-width: 640px)  { .custom-document-book { --custom-vwu: 4.2px; --custom-vhu: clamp(5.2px, 1svh, 7.6px); --custom-pad: 24px; } }
@media (max-width: 380px)  { .custom-document-book { --custom-vwu: 3.6px; --custom-vhu: clamp(5.2px, 1svh, 7.2px); } }

.custom-document-book *,
.custom-document-book *::before,
.custom-document-book *::after {
	box-sizing: border-box;
}

.custom-document-book__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* the brand leaf, outlined in white — about-us-memorandum.css:58-80 */
.custom-document-book__leaf {
	position: absolute;
	z-index: 0;
	height: auto;
	color: #FFFFFF;
	pointer-events: none;
}

.custom-document-book__leaf--a {
	top: -46px;
	left: -58px;
	width: clamp(110px, calc(15 * var(--custom-vwu)), 230px);
	opacity: 0.15;
}

.custom-document-book__leaf--b {
	right: -78px;
	bottom: -100px;
	width: clamp(170px, calc(25 * var(--custom-vwu)), 360px);
	opacity: 0.11;
	transform: rotate(180deg);
}

@media (max-width: 640px) {
	.custom-document-book__leaf--a { top: -30px; left: -38px; }
	.custom-document-book__leaf--b { right: -48px; bottom: -62px; }
}

/* ------------------------------------------------------------------ */
/* The head — about-us-memorandum.css:46-48, app.css .h-sec / .lead    */
/* ------------------------------------------------------------------ */

.custom-document-book__head {
	max-width: 640px;
	margin: 0 0 min(clamp(22px, calc(3 * var(--custom-vwu)), 44px), calc(3.2 * var(--custom-vhu)));
	font-size: 16px;
	line-height: 1.6;
}

.custom-document-book__title {
	margin: 0;
	padding: 0;
	font-size: min(clamp(28px, calc(3.9 * var(--custom-vwu)), 56px), calc(6.2 * var(--custom-vhu)));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: wrap;
	color: #FFFFFF;
}

.custom-document-book__title strong { font-weight: 700; }

.custom-document-book__title em {
	position: relative;
	display: inline-block;
	font-style: italic;
	font-weight: 700;
	color: #50A3D5;
}

.custom-document-book__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 0.16em;
	border-radius: 3px;
	background: currentColor;
	opacity: 0.18;
}

.custom-document-book__intro {
	max-width: 870px;
	margin: 0 auto;
	font-size: clamp(16px, calc(1.25 * var(--custom-vwu)), 18px);
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.custom-document-book__title + .custom-document-book__intro {
	margin-top: min(22px, calc(2.4 * var(--custom-vhu)));
}

@media (max-width: 640px) {
	.custom-document-book__title {
		font-size: clamp(22px, calc(6.2 * var(--custom-vwu)), 56px);
	}

	.custom-document-book__intro {
		font-size: 14px;
		line-height: 1.5;
	}

	.custom-document-book__title + .custom-document-book__intro {
		margin-top: 14px;
	}
}

/* ------------------------------------------------------------------ */
/* The reader card — doc-viewer.css                                    */
/* ------------------------------------------------------------------ */

.custom-document-book__card {
	/* the sheet's height follows the window, so a short screen gets a shorter sheet */
	--custom-docv-h: clamp(420px, calc(76 * var(--custom-vhu)), 760px);
	width: 100%;
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);
	color: #475569;
	text-align: left;
	outline: none;
}

.custom-document-book__card:focus-visible {
	box-shadow: 0 0 0 3px #50A3D5, 0 34px 80px -20px rgba(22, 65, 140, 0.3);
}

/* 01 · the bar — the document's name, its line and the download button */
.custom-document-book__bar {
	display: flex;
	align-items: center;
	gap: clamp(12px, calc(1.4 * var(--custom-vwu)), 20px);
	padding: clamp(14px, calc(1.6 * var(--custom-vwu)), 22px) clamp(16px, calc(2 * var(--custom-vwu)), 28px);
	background: #16418C;
	color: #FFFFFF;
}

.custom-document-book__ico {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: clamp(36px, calc(3.4 * var(--custom-vwu)), 48px);
	aspect-ratio: 1;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.14);
}

.custom-document-book__ico svg {
	width: 56%;
	height: 56%;
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.custom-document-book__id {
	flex: 1 1 auto;
	min-width: 0;
}

.custom-document-book__t {
	margin: 0;
	padding: 0;
	font-size: clamp(16px, calc(1.5 * var(--custom-vwu)), 20px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #FFFFFF;
}

.custom-document-book__meta {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.custom-document-book__dl,
.custom-document-book__dl:visited {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	color: #FFFFFF;
	text-decoration: none;
	transition: background 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-document-book__dl svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.custom-document-book__dl:hover,
.custom-document-book__dl:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.7);
	color: #FFFFFF;
	text-decoration: none;
}

@media (max-width: 640px) {
	.custom-document-book__bar { flex-wrap: wrap; }
	.custom-document-book__dl { justify-content: center; width: 100%; }
}

/* 02 · the stage — one sheet on a pale ground, an arrow either side */
.custom-document-book__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(20px, calc(2.4 * var(--custom-vwu)), 36px) clamp(48px, calc(5 * var(--custom-vwu)), 76px);
	background: #F5F8FC;
}

/* the width leads and the height follows A4, so a narrow screen never stretches the page */
.custom-document-book__paper {
	position: relative;
	width: min(calc(var(--custom-docv-h) * 1654 / 2340), 100%);
	overflow: hidden;
	aspect-ratio: 1654 / 2340;
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(22, 65, 140, 0.18), 0 2px 6px rgba(22, 65, 140, 0.1);
}

/* every page lies in the stack and one is shown — no flash while the next one loads */
.custom-document-book__pg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-document-book__pg.is-on {
	opacity: 1;
}

/* a page not drawn yet is a plain sheet with its number */
.custom-document-book__paper::before {
	content: attr(data-fallback);
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	font-size: 16px;
	text-align: center;
	color: #94A3B8;
}

.custom-document-book .custom-document-book__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(36px, calc(3.4 * var(--custom-vwu)), 46px);
	min-height: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 1;
	border: 1px solid #EEF2F7;
	border-radius: 999px;
	background: #FFFFFF;
	color: #16418C;
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);
	translate: 0 -50%;
	cursor: pointer;
	transition: background 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-document-book__nav svg {
	width: 40%;
	height: 40%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.custom-document-book .custom-document-book__nav--prev { left: clamp(6px, calc(1 * var(--custom-vwu)), 16px); }
.custom-document-book .custom-document-book__nav--next { right: clamp(6px, calc(1 * var(--custom-vwu)), 16px); }
.custom-document-book .custom-document-book__nav:hover:not(:disabled),
.custom-document-book .custom-document-book__nav:focus:not(:disabled) { background: #16418C; color: #FFFFFF; }
.custom-document-book .custom-document-book__nav:disabled { opacity: 0.32; cursor: default; }

/* 03 · the foot — a thumbnail per page and the count */
.custom-document-book__foot {
	display: flex;
	align-items: center;
	gap: clamp(12px, calc(1.6 * var(--custom-vwu)), 24px);
	padding: clamp(12px, calc(1.4 * var(--custom-vwu)), 18px) clamp(16px, calc(2 * var(--custom-vwu)), 28px);
	border-top: 1px solid #EEF2F7;
	background: #FFFFFF;
}

.custom-document-book__thumbs {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 2px;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: thin;
}

.custom-document-book__thumbs li {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;                     /* app.css body — the line each thumbnail sits on */
	list-style: none;
}

.custom-document-book__thumbs::-webkit-scrollbar { height: 6px; }
.custom-document-book__thumbs::-webkit-scrollbar-thumb { background: #EEF2F7; border-radius: 999px; }

.custom-document-book .custom-document-book__thumb {
	display: inline-block;
	vertical-align: baseline;
	flex: 0 0 auto;
	width: clamp(34px, calc(3.2 * var(--custom-vwu)), 44px);
	min-height: 0;
	margin: 0;
	padding: 0;
	aspect-ratio: 1654 / 2340;
	border: 1px solid #EEF2F7;
	border-radius: 4px;
	background: #F5F8FC center / cover no-repeat;
	cursor: pointer;
	transition: border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-document-book .custom-document-book__thumb:hover { border-color: #50A3D5; }

.custom-document-book .custom-document-book__thumb[aria-current="true"] {
	border-color: #50A3D5;
	box-shadow: 0 0 0 2px rgba(80, 163, 213, 0.35);
}

.custom-document-book__count {
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
	color: #64748B;
}

.custom-document-book__count b {
	font-weight: 600;
	color: #16418C;
}

/* a one-page document needs no way to turn pages */
.custom-document-book__card.is-single .custom-document-book__nav,
.custom-document-book__card.is-single .custom-document-book__foot {
	display: none;
}

/* a phone: the stage keeps every pixel for the page, the arrows ride over its edge */
@media (max-width: 640px) {
	.custom-document-book__stage {
		padding-left: 16px;
		padding-right: 16px;
	}

	.custom-document-book .custom-document-book__nav {
		width: 34px;
		box-shadow: 0 2px 10px rgba(14, 30, 84, 0.28);
	}

	.custom-document-book .custom-document-book__nav--prev { left: 4px; }
	.custom-document-book .custom-document-book__nav--next { right: 4px; }

	.custom-document-book__foot {
		gap: 12px;
	}
}