@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

/* Predict Academy Notebook — marks and blocks for posts.
   Pens: blue #2b45a8, red #c8372d, orange #e07a3a, highlighter yellow. */

/* ============ inline marks (editor toolbar buttons) ============ */

/* Marker */
.pa-hl {
	background: linear-gradient(100deg, rgba(255,212,71,0) 0, rgba(255,212,71,.75) 1.5%, rgba(255,212,71,.5) 6%, rgba(255,212,71,.38) 90%, rgba(255,212,71,.7) 97%, rgba(255,212,71,0) 100%);
	background-repeat: no-repeat;
	background-size: 100% 78%;
	background-position: 0 70%;
	padding: 0 .2em;
	margin: 0 -.1em;
	border-radius: .3em .6em .4em .7em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 1.1s cubic-bezier(.6,.1,.3,1);
}
.pa-js .pa-hl { background-size: 0% 78%; }
.pa-js .pa-hl.in { background-size: 100% 78%; }

/* Red circle (best on a number or 1–3 words) */
.pa-circle { position: relative; white-space: nowrap; font-weight: 700; }
.pa-circle::after {
	content: "";
	position: absolute;
	inset: -9px -14px -7px -12px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M38 14C80 2 168 4 190 26c16 18-10 46-84 50C46 79 6 66 9 42 12 22 46 10 104 8' fill='none' stroke='%23c8372d' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	transition: clip-path .9s ease-out;
}
.pa-js .pa-circle::after { clip-path: inset(0 100% 0 0); }
.pa-js .pa-circle.in::after { clip-path: inset(0 0 0 0); }

/* Pen underline (orange, like the homepage) */
.pa-under {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 3 90 10 130 5s55 2 66-1' fill='none' stroke='%23e07a3a' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 9px;
	padding-bottom: 5px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size .9s ease-out;
}
.pa-js .pa-under { background-size: 0% 9px; }
.pa-js .pa-under.in { background-size: 100% 9px; }

/* Red pen: colours a word, e.g. the ≠ in a pull line */
.pa-red { color: #c8372d; }

/* ============ blocks (patterns) ============ */

/* Margin note: in the gutter on wide screens, under the paragraph otherwise */
.pa-note {
	font-family: 'Caveat', cursive !important;
	font-weight: 600;
	font-size: 24px !important;
	line-height: 1.1 !important;
	color: #2b45a8;
	margin: -10px 0 26px !important;
	padding-left: 14px;
	border-left: 2px solid rgba(43,69,168,.35);
}

/* Big number in the margin */
.pa-stat {
	font-family: 'Caveat', cursive !important;
	font-weight: 600;
	font-size: 20px !important;
	line-height: 1.15 !important;
	color: #c8372d;
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: -4px 0 24px !important;
}
.pa-stat strong { font-size: 44px; font-weight: 700; line-height: 1; flex: none; }

/* Handwritten pull line */
.pa-pull {
	font-family: 'Caveat', cursive !important;
	font-weight: 600;
	font-size: 34px !important;
	line-height: 1.2 !important;
	color: #2b45a8;
	text-align: center;
	margin: 30px 0 34px !important;
}

/* Two index cards */
.wp-block-columns.pa-cards { gap: 18px; margin: 30px 0 14px; }
.pa-cards > .wp-block-column {
	background: #fff repeating-linear-gradient(transparent 0 27px, #e9eef8 27px 28px);
	background-position: 0 44px;
	border: 1px solid #e7e2d3;
	border-radius: 4px;
	padding: 16px 18px 14px;
	transform: rotate(-1deg);
}
.pa-cards > .wp-block-column:nth-child(2) { transform: rotate(.8deg); }
.pa-cards p { margin: 0 !important; }
.pa-cards .pa-card-who {
	font-family: 'Caveat', cursive;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	color: #2b45a8;
	border-bottom: 1.5px solid rgba(200,55,45,.4);
	padding-bottom: 8px;
	margin-bottom: 12px !important;
}
.pa-cards .pa-card-big { font-family: 'Fraunces', serif; font-weight: 700; font-size: 40px; line-height: 1.05; }
.pa-cards .pa-card-sub { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #5b564a; }
.pa-cards ul { margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; font-size: 14.5px; line-height: 28px; }
.pa-cards li { margin: 0 !important; }
.pa-cards li::before { content: "– "; color: #5b564a; }
.pa-cards-label {
	font-family: 'Caveat', cursive !important;
	font-weight: 700;
	font-size: 22px !important;
	color: #c8372d;
	text-align: center;
	transform: rotate(-3deg);
	margin: 0 0 22px !important;
}

/* T-chart */
.wp-block-columns.pa-t { gap: 0; margin: 26px 0 34px; }
.pa-t > .wp-block-column { padding: 0 22px; }
.pa-t > .wp-block-column:first-child { border-right: 2px solid rgba(28,26,22,.75); }
.pa-t .pa-t-head {
	font-family: 'Caveat', cursive !important;
	font-weight: 700;
	font-size: 26px !important;
	line-height: 1 !important;
	color: #2b45a8;
	margin: 0 0 12px !important;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba(28,26,22,.75);
}
.pa-t > .wp-block-column:nth-child(2) .pa-t-head { color: #c8372d; }
.pa-t ul { list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 15.5px; line-height: 1.5; }
.pa-t li { position: relative; padding-left: 30px; margin: 0 0 10px !important; }
.pa-t li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: no-repeat center / contain; }
.pa-t ul.pa-check li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 11c3 2 4 4 6 7C10 11 14 5 19 1' fill='none' stroke='%232b45a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pa-t ul.pa-cross li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3c5 5 9 10 14 15M17 2C12 8 7 12 2 18' fill='none' stroke='%23c8372d' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Sticky note */
.wp-block-group.pa-sticky {
	background: #fff3b8;
	padding: 22px 26px 24px;
	margin: 34px 10px 30px;
	transform: rotate(-1.2deg);
	box-shadow: 0 10px 18px -12px rgba(60,50,10,.45);
	position: relative;
}
.pa-sticky::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: 110px;
	height: 26px;
	margin-left: -55px;
	background: rgba(255,255,255,.55);
	border: 1px solid rgba(0,0,0,.05);
	transform: rotate(2deg);
}
.pa-sticky p { margin: 0 !important; }
.pa-sticky .pa-sticky-title {
	font-family: 'Caveat', cursive !important;
	font-weight: 700;
	font-size: 26px !important;
	line-height: 1.1 !important;
	margin-bottom: 8px !important;
}

/* ============ the paper sheet (posts that use notebook elements) ============ */

body.pa-notebook { background: #efece2; }
body.pa-notebook .nv-single-post-wrap {
	flex: 0 0 auto;
	width: 100%;
	max-width: 780px;
	margin: 40px auto 60px !important;
	background: #fdfbf5;
	border-radius: 8px;
	box-shadow: 0 2px 14px rgba(30,25,10,.06);
	padding: 8px 56px 40px 72px;
	position: relative;
}
body.pa-notebook .nv-single-post-wrap::before { /* red margin line */
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40px;
	width: 1.5px;
	background: rgba(200,55,45,.28);
}
body.pa-notebook .nv-content-wrap { font-size: 17px; line-height: 1.75; }
body.pa-notebook .nv-content-wrap > p:not([class*="pa-"]),
body.pa-notebook .nv-content-wrap > ul:not([class*="pa-"]) li,
body.pa-notebook .nv-content-wrap > ol:not([class*="pa-"]) li {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Notes and numbers move into the margins when there is room */
@media (min-width: 1280px) {
	body.pa-notebook .pa-note {
		float: right;
		clear: right;
		width: 200px;
		margin: 0 -276px 10px 0 !important;
		padding: 0;
		border: 0;
		transform: rotate(-3deg);
	}
	body.pa-notebook .pa-note::after { /* arrow back to the text */
		content: "";
		display: block;
		width: 56px;
		height: 34px;
		margin-top: 4px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'%3E%3Cpath d='M56 4C44 26 26 31 7 26M7 26l9-8M7 26l10 6' fill='none' stroke='%232b45a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
	body.pa-notebook .pa-note.pa-note-left {
		float: left;
		clear: left;
		margin: 0 0 10px -292px !important;
		text-align: right;
		transform: rotate(2deg);
	}
	body.pa-notebook .pa-note.pa-note-left::after { margin-left: auto; transform: scaleX(-1); }

	body.pa-notebook .pa-stat {
		float: left;
		clear: left;
		width: 160px;
		display: block;
		margin: 0 0 10px -250px !important;
		text-align: center;
		transform: rotate(-4deg);
	}
	body.pa-notebook .pa-stat strong { display: block; font-size: 56px; }
}

@media (max-width: 781px) {
	.wp-block-columns.pa-cards { gap: 22px; }
	.wp-block-columns.pa-t { gap: 26px; }
	.pa-t > .wp-block-column { padding: 0; }
	.pa-t > .wp-block-column:first-child { border-right: 0; }
	body.pa-notebook .nv-single-post-wrap { margin: 0 !important; border-radius: 0; padding: 0 18px 30px 34px; }
	body.pa-notebook .nv-single-post-wrap::before { left: 18px; }
	.pa-pull { font-size: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.pa-hl, .pa-under, .pa-circle::after { transition: none; }
}