/* NOTATE figures: problem ladder, anatomy callouts, outcome stats, takeaway.
   Sits on top of the existing Notate page styles. */

body.notate-page .nt-section p:not(.nt-kicker),
body.notate-page .nt-decision p:not(.nt-kicker) { color: var(--nt-ink, var(--clr-text)); }
.nt-hero h1 .nt-tone { color: #999da1; }
.nt-lead { color: var(--nt-ink, var(--clr-text)); font-weight: 500; font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
body.notate-page .nt-section .nt-step-label { font-size: var(--label-fs); font-weight: var(--label-fw); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--nt-muted, var(--clr-muted-strong)); margin-bottom: 10px; }

/* Shared figure panel: dotted grid, rounded */
.ntf-panel {
	position: relative;
	border-radius: 20px;
	background: radial-gradient(circle, rgb(32 38 45 / .07) .6px, transparent .9px) 0 0 / 10px 10px, var(--clr-panel);
	padding: clamp(16px, 3vw, 36px);
	overflow: hidden;
}
.ntf-tag { font-size: var(--label-fs); font-weight: var(--label-fw); letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--clr-muted); }

/* Ladder: each fix creates the next problem */
.ntf-ladder { display: grid; gap: 14px; margin-top: 22px; }
@media (width >= 800px) {
	.ntf-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 32px; margin-top: 30px; }
	.ntf-step:nth-child(2) { margin-bottom: 40px; }
	.ntf-step:nth-child(3) { margin-bottom: 80px; }
	.ntf-step:not(:last-child)::after {
		content: ""; position: absolute; top: 50%; right: -32px; width: 32px;
		border-top: 1.5px dashed rgb(32 38 45 / .35);
	}
}
.ntf-step { position: relative; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 0 0 1px var(--clr-border), 0 12px 24px -18px rgb(32 38 45 / .25); }
.ntf-step .ntf-tag { display: block; margin: 14px 4px 0; }
.body-copy.ntf-text, .ntf-step p.ntf-text { font-size: 15px; line-height: 1.45; color: var(--clr-text); margin: 8px 4px 0; }
.ntf-fail { display: inline-flex; gap: 6px; margin: 10px 4px 2px; font-size: 12px; color: #b4412f; }
.ntf-fail::before { content: "×"; font-weight: 600; }

/* Mini browser drawn in CSS */
.mb { border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--clr-border); overflow: hidden; font-size: 9px; color: #666; }
.mb__bar { display: flex; align-items: center; gap: 3px; padding: 5px 6px; background: #f2f4f6; border-bottom: 1px solid var(--clr-border); min-height: 20px; overflow: hidden; }
.mb__bar i { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: #d1d4d7; }
.mb__tab { flex: 0 1 auto; min-width: 6px; height: 11px; border-radius: 3px; background: #e3e5e8; }
.mb__tabs--many .mb__tab { width: 9px; }
.mb__body { position: relative; height: 104px; padding: 8px; display: grid; gap: 5px; align-content: start; }
.mb__line { height: 5px; border-radius: 3px; background: #ebedef; }
.mb__line.w6 { width: 60%; } .mb__line.w8 { width: 80%; } .mb__line.w4 { width: 40%; }
.mb__folder { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: 4px; background: #f5f7f9; color: #555; }
.mb__folder::before { content: ""; width: 9px; height: 7px; border-radius: 1.5px; background: #d3d6d9; }
.mb__q { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 999px; background: #fff0ec; color: #b4412f; font-size: 9px; }
.mb__split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 104px; padding: 8px; }
.mb__shot { border-radius: 4px; background: linear-gradient(135deg, #eee 0 40%, #e0e2e5 40% 100%); position: relative; }
.mb__shot::after { content: "IMG_4021.png"; position: absolute; left: 4px; bottom: 3px; font-size: 7px; color: #888; }
.mb__notes { border-radius: 4px; background: #fffbea; padding: 5px; display: grid; gap: 4px; align-content: start; }
.mb__notes .mb__line { background: #f0e6bd; }

/* Anatomy: the screen on top, four labels below, joined by dashed lines */
/* Callout figure: cards flank the screenshot; dashed elbows run from each card's icon to a pin */
.ntc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ntc-shot { position: relative; }
.ntc-shot img, body.notate-page .ntc-shot img { display: block; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; border-radius: 12px; box-shadow: 0 0 0 1px var(--clr-border), 0 16px 32px -20px rgb(28 36 48 / .25); }
.ntc-pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--clr-text); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--clr-border); }
.ntc-card { position: relative; background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 0 0 1px var(--clr-border); }
.ntc-card .ntf-tag { margin: 0 0 6px; color: var(--clr-muted); }
body.notate-page main .nt-section .ntc-card p.ntc-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--clr-text); }
.ntc-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: #fff; color: var(--clr-text); box-shadow: 0 0 0 1px var(--clr-border), 0 2px 6px rgb(28 36 48 / .08); }
.ntc-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (width < 900px) {
	.ntc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ntc-shot { grid-column: 1 / -1; order: -1; }
}
@media (width >= 900px) {
	/* Cards in the outer columns; each icon sits on the card edge facing the screenshot, where its line starts */
	.ntc { grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); gap: 20px 32px; align-items: center; align-content: center; aspect-ratio: 16 / 9; }
	.ntc-shot { grid-column: 2; grid-row: 1 / span 2; }
	.ntc-card--left { grid-column: 1; }
	.ntc-card--right { grid-column: 3; }
	.ntc-card[data-to="element"], .ntc-card[data-to="folders"] { grid-row: 1; align-self: start; }
	.ntc-card[data-to="note"], .ntc-card[data-to="panel"] { grid-row: 2; align-self: end; }
	.ntc-icon { position: absolute; top: 50%; margin: 0; translate: 0 -50%; }
	.ntc-card--left .ntc-icon { right: 0; translate: 50% -50%; }
	.ntc-card--right .ntc-icon { left: 0; translate: -50% -50%; }
}
.ntf-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.ntf-lines > path { fill: none; stroke: rgb(32 38 45 / .4); stroke-width: 1.25; stroke-dasharray: 4 4; }
.ntc-card, .ntc-pin { z-index: 2; }
@media (width < 900px) { .ntf-lines { display: none; } }

/* Figure text sizes (override the shared case body size) */
body.case-page.notate-page main .nt-section .nt-feature-heading h3 { margin-bottom: 10px; }
body.notate-page main .nt-section .ntf-takeaway p.ntf-takeaway-line { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.035em; font-weight: 500; color: var(--clr-text); margin-top: 10px; max-width: 30ch; }
body.notate-page main .nt-section p.nt-lead { font-size: 17px; line-height: 1.4; font-weight: 500; margin-bottom: 8px; }
body.notate-page main .nt-section :is(.ntf-stat p, p.ntf-text) { font-size: 14px; line-height: 1.45; margin-top: 6px; }
body.notate-page main .nt-section p.ntf-tag { font-size: 11px; line-height: 1.4; }

/* Outcome stats */
.ntf-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 32px; }
.ntf-stat { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 0 0 1px var(--clr-border); display: grid; gap: 6px; align-content: start; }
.ntf-stat strong { font-size: clamp(36px, 4vw, 48px); line-height: 1; color: var(--clr-text); font-weight: 500; letter-spacing: -.03em; }
.ntf-stat--accent strong { color: #c79a00; }
.nt-section .ntf-stat p { font-size: 14px; line-height: 1.45; }

/* Takeaway: the last line on the page */
.ntf-takeaway { margin-top: 56px; }
.nt-section .ntf-takeaway p.ntf-takeaway-line { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.035em; font-weight: 500; color: var(--clr-text); margin-top: 10px; }

body.notate-page main .nt-section p.nt-step-label { font-size: var(--label-fs); line-height: 1.4; letter-spacing: var(--label-ls); text-transform: uppercase; color: var(--clr-muted-strong); margin-bottom: 10px; }

/* ── Research: each fix creates the next problem (1920×1080 illustration) ── */
.ntl-fig .ntl-svg { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1080; font-family: inherit; }

/* ── Build: doc map (same diagram + on-page title as yap's "The spec the agents built from") ── */
.yap-diagram svg { display: block; width: 100%; height: auto; }
body.case-page main .yap-figtitle { margin: 40px 0 12px; font-size: 15px; font-weight: 500; color: var(--clr-text, #1c1d1c); max-width: none; }
body.case-page main .yap-figtitle + .yap-diagram { margin-top: 0; }
body.case-page main .yap-diagram + .nt-reading { margin-top: 56px; }