/*
 * AH Annotated Shot: screenshot on a paper frame with hand-drawn marks, plus numbered notes.
 * The marks are server-rendered SVG paths (.ah-draw): they draw themselves when the figure is
 * seen, and are simply there without JS or with reduced motion.
 */
.ah-ashot,
.ah-ashot *,
.ah-ashot *::before,
.ah-ashot *::after { box-sizing: border-box; }

.ah-ashot {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	gap: 40px;
	align-items: start;
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: 17px;
	line-height: 1.75;
}
.ah-ashot.ah-ashot--notes-first .ah-ashot__notes { order: -1; }
.ah-ashot.ah-ashot--notes-first { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }

/* the screenshot on its paper frame */
.ah-ashot .ah-ashot__shot {
	position: relative;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--ah-line);
	border-radius: 4px;
	background: var(--ah-paper);
	box-shadow: 0 30px 60px -44px rgba(15, 27, 60, .6);
	direction: ltr; /* the screenshot is a fixed picture: never mirrored */
}
.ah-ashot .ah-ashot__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}
.ah-ashot .ah-ashot__over {
	position: absolute;
	inset: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	overflow: visible;
	pointer-events: none;
	direction: ltr;
}
.ah-ashot .ah-ashot__path { stroke-width: 3; transition: stroke-width .35s var(--ah-ease), opacity .35s; }
.ah-ashot .ah-ashot__mk {
	font-family: var(--ah-f-hand);
	font-weight: 700;
	font-size: 26px;
	fill: var(--ah-ink-gold);
	text-anchor: end;
	transition: opacity .35s;
}
.ah-ashot .ah-ashot__mark { transition: opacity .35s; }

/* draw one mark after another, then show its number */
.ah-motion .ah-ashot .ah-rv .ah-ashot__path.ah-draw {
	transition: stroke-dashoffset 1.4s var(--ah-ease) calc(.35s + var(--i, 0) * .32s), stroke-width .35s var(--ah-ease);
}
.ah-motion .ah-ashot .ah-rv .ah-ashot__mk { opacity: 0; transition: opacity .5s var(--ah-ease) calc(1.25s + var(--i, 0) * .32s); }
.ah-motion .ah-ashot .ah-rv.seen .ah-ashot__mk { opacity: 1; }

/* notes */
.ah-ashot .ah-ashot__notes {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ah-motion .ah-ashot .ah-ashot__notes.ah-rv--up { transition-delay: .15s; }
.ah-ashot .ah-ashot__note {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: 0;
	padding: 0;
}
.ah-ashot .ah-ashot__note::marker { content: none; }
.ah-ashot .ah-ashot__num {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--ah-ink-gold);
	border-radius: 50%;
	font-family: var(--ah-f-hand);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ah-ink-gold);
	transform: rotate(-6deg);
	transition: transform .45s var(--ah-spring), background-color .3s, color .3s;
}
.ah-ashot .ah-ashot__body { min-width: 0; }
.ah-ashot .ah-ashot__hand { display: block; }
.ah-ashot .ah-ashot__text {
	margin: 2px 0 0;
	font-size: .92rem;
	line-height: 1.75;
	color: var(--ah-muted);
}

/* a note lights up its mark (JS sets .is-hot) */
.ah-ashot.is-hot .ah-ashot__mark { opacity: .28; }
.ah-ashot.is-hot .ah-ashot__mark.is-hot { opacity: 1; }
.ah-ashot .ah-ashot__mark.is-hot .ah-ashot__path { stroke-width: 4.5; }
.ah-ashot .ah-ashot__note.is-hot .ah-ashot__num { transform: rotate(-6deg) scale(1.12); background: var(--ah-ink-gold); color: var(--ah-paper); }

/* on navy */
.ah-ashot.ah-on-dark { color: var(--ah-on-navy); }
.ah-ashot.ah-on-dark .ah-ashot__shot { border-color: var(--ah-line-navy); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.ah-ashot.ah-on-dark .ah-ashot__text { color: var(--ah-on-navy-muted); }
.ah-ashot.ah-on-dark .ah-ashot__num { border-color: var(--ah-gold-hi); color: var(--ah-gold-hi); }
.ah-ashot.ah-on-dark .ah-ashot__note.is-hot .ah-ashot__num { background: var(--ah-gold-hi); color: var(--ah-deep); }
/* the marks sit on a white screenshot even on navy, so they keep the dark gold */
.ah-ashot.ah-on-dark .ah-ashot__path { stroke: var(--ah-ink-gold); }

@media (max-width: 1024px) {
	.ah-ashot,
	.ah-ashot.ah-ashot--notes-first { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.ah-ashot .ah-ashot__notes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 26px; }
}
@media (max-width: 767px) {
	.ah-ashot .ah-ashot__shot { padding: 8px; }
	.ah-ashot .ah-ashot__over { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
	/* the picture is small on a phone: thicker strokes, bigger numbers */
	.ah-ashot .ah-ashot__path { stroke-width: 5; }
	.ah-ashot .ah-ashot__mark.is-hot .ah-ashot__path { stroke-width: 6.5; }
	.ah-ashot .ah-ashot__mk { font-size: 40px; }
	.ah-ashot .ah-ashot__notes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.ah-ashot .ah-ashot__path,
	.ah-ashot .ah-ashot__mk,
	.ah-ashot .ah-ashot__mark,
	.ah-ashot .ah-ashot__num { transition: none; }
}