/* /upcoming, "Up and coming" (22 Oct 2026, pages/upcoming.py builds it, upcoming.js moves it): the counts at the top and one
	lane per product in its own kit, three stages left to right. Stroke: an ink filmstrip, frames exposed as they land. ShotScript:
	white and orange, the crosshair at its 9 degree tilt. Mime: black and white, a box drawn in dashes that becomes solid. */
.up-body { --up-ink: #1c1b21; --up-magenta: #d23a7e; --up-film: #f4f4f6; --up-orange: #FF6B1A; --up-orange-text: #C2410C; --up-orange-soft: #FFF0E8;
	--up-in: .35s; --up-out: .6s; }
.up-sec { padding-top: clamp(26px, 4.4vh, 56px); }
.up-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.up-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the top: the title, the status line, each product's counts ---------- */
.up-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: clamp(26px, 3.6vw, 44px) clamp(22px, 3.6vw, 44px);
	border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); }
.up-title { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px); }
.up-glass { display: inline-flex; flex: none; color: var(--ink); line-height: 0; }
.up-glass svg { display: block; width: clamp(44px, 4.6vw, 58px); height: auto; overflow: visible; }
.up-head h1 { margin: 0; font-weight: 900; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -.025em; }
.up-head .doc-status { display: inline-flex; align-items: center; gap: 7px; margin: 18px 0 0; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--paper);
	color: var(--muted); font-weight: 700; font-size: 13px; line-height: 1.2; }
.up-head .doc-status-ico { display: grid; flex: none; }
.up-head .doc-status-ico svg { width: 14px; height: 14px; }
.up-head .doc-status-ico circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.up-head .doc-status-ico path { fill: currentColor; }

.up-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.up-sum { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name go" "ico nums go"; align-items: center; gap: 5px 14px;
	padding: 13px 20px 13px 13px; border-radius: 22px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.up-sum-ico { grid-area: ico; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; }
.up-sum-img { width: auto; height: 31px; max-width: 37px; }
.up-sum-name { grid-area: name; min-width: 0; font-weight: 850; font-size: 16px; line-height: 1.15; }
.up-nums { grid-area: nums; display: flex; gap: 20px; }
.up-num { display: inline-flex; align-items: center; gap: 7px; }
.up-num b { font-weight: 850; font-size: 25px; line-height: 1; font-variant-numeric: tabular-nums; }
.up-num .up-mark { flex: none; }
.up-sum.up-k-stroke { background: var(--up-ink); color: var(--up-film); }
.up-sum.up-k-stroke .up-sum-ico { background: var(--up-film); }
.up-sum.up-k-shotscript { background: var(--up-orange-soft); }
.up-sum.up-k-shotscript .up-sum-ico { background: var(--card); }
.up-sum.up-k-mime { color: #000; }
.up-sum.up-k-mime .up-sum-ico { background: var(--paper); }
.up-sum .up-box { opacity: .5; }
.up-go { grid-area: go; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; opacity: .45; }
.up-sum.up-k-stroke .up-go { background: rgb(244 244 246 / .1); }
.up-sum.up-k-shotscript .up-go { background: var(--card); color: var(--up-orange-text); }
.up-sum.up-k-mime .up-go { background: var(--paper); }

/* ---------- lanes ---------- */
.up-lanes { display: grid; gap: 22px; margin-top: 22px; }
.up-lane { position: relative; overflow: clip; padding: 30px 32px 34px; border-radius: var(--radius); scroll-margin-top: 90px; }
.up-lane-in { position: relative; z-index: 1; }
.up-lane-h { margin: 0; font-size: 23px; font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.up-lane-h a { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.up-lane-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--paper); }
.up-lane-img { width: auto; height: 27px; max-width: 32px; }

.up-stages { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1.14fr) 30px minmax(0, 1fr); align-items: stretch; margin-top: 24px; }
.up-stage { min-width: 0; }
.up-stage-h { display: flex; align-items: center; gap: 8px; height: 24px; margin: 0 0 12px; font-weight: 850; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.up-flow { position: relative; display: flex; justify-content: center; }
.up-flow::before { content: ""; position: absolute; top: 34px; bottom: 4px; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: currentColor; opacity: .14; }
.up-flow svg { position: relative; margin-top: 4px; opacity: .5; }

.up-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.up-list[hidden], .up-empty[hidden] { display: none; }
.up-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 40px 12px 12px; border-radius: 16px;
	color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.up-tile { display: inline-flex; flex: none; line-height: 0; }
.up-tile svg { display: block; overflow: visible; }
.up-card-body { display: grid; gap: 4px; min-width: 0; padding-top: 1px; }
.up-title { font-weight: 800; font-size: 15px; line-height: 1.32; }
.up-when { font-weight: 700; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.up-text { margin: 0; padding-top: 1px; font-weight: 600; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.up-text code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; padding: .06em .34em; border-radius: 6px; background: rgb(0 0 0 / .06); }
.up-text a:not(.up-part) { color: inherit; font-weight: 750; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.up-corner { position: absolute; top: 13px; right: 13px; }
.up-live { position: absolute; top: 9px; right: 9px; overflow: visible; }
.up-s-next .up-card { gap: 10px; padding: 9px 14px 9px 10px; border-radius: 14px; }
.up-s-next .up-text { font-size: 13.5px; padding-top: 4px; }
.up-empty { display: grid; place-items: center; min-height: 92px; border-radius: 16px; opacity: .55; }
.up-part { display: inline-flex; vertical-align: 1px; margin-left: 7px; padding: 3px 8px 2px; border-radius: 999px; background: var(--up-orange-soft); color: var(--up-orange-text);
	font-weight: 800; font-size: 10.5px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.up-part-system { background: #DDF4FF; color: #0969DA; }
.up-part-generic { background: #DAFBE1; color: #1A7F37; }

/* the dashed box (Mime): the lane, its cards and its count, drawn by an svg the size of its host */
.up-box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.up-box-r { stroke-dasharray: 9 8.5; }
.up-card .up-box-r { stroke-dasharray: 6.5 6; }
.up-sum .up-box-r { stroke-dasharray: 7 6.5; }

/* ---------- Stroke: an ink filmstrip; Next is unexposed, Building now is in the gate, Just landed is exposed ---------- */
.up-lane.up-k-stroke { padding-block: 44px 46px; background: var(--up-ink); color: var(--up-film); box-shadow: var(--shadow-sm); }
.up-sprk { position: absolute; left: -22px; width: calc(100% + 44px); height: 9px; opacity: .17; pointer-events: none; }
.up-sprk-t { top: 15px; }
.up-sprk-b { bottom: 15px; }
.up-k-stroke .up-lane-ico { background: var(--up-film); }
.up-k-stroke .up-stage-h { color: rgb(244 244 246 / .82); }
.up-k-stroke .up-flow { color: var(--up-magenta); }
.up-k-stroke .up-flow::before { background: var(--up-film); opacity: .1; }
.up-k-stroke .up-flow svg { opacity: .7; }
.up-k-stroke .up-s-landed .up-card, .up-k-stroke .up-s-now .up-card { background: var(--up-film); color: var(--up-ink); }
.up-k-stroke .up-s-landed .up-when { color: #6c6b74; }
.up-k-stroke .up-s-now .up-card::before { content: ""; position: absolute; inset: 6px; border-radius: 11px; pointer-events: none; opacity: .3;
	background: linear-gradient(var(--up-ink) 0 0) left top / 11px 2px, linear-gradient(var(--up-ink) 0 0) left top / 2px 11px,
		linear-gradient(var(--up-ink) 0 0) right top / 11px 2px, linear-gradient(var(--up-ink) 0 0) right top / 2px 11px,
		linear-gradient(var(--up-ink) 0 0) left bottom / 11px 2px, linear-gradient(var(--up-ink) 0 0) left bottom / 2px 11px,
		linear-gradient(var(--up-ink) 0 0) right bottom / 11px 2px, linear-gradient(var(--up-ink) 0 0) right bottom / 2px 11px;
	background-repeat: no-repeat; }
.up-k-stroke .up-s-next .up-card { background: #2a2931; color: #cfcdd8; }
.up-k-stroke .up-s-next .up-tile { opacity: .82; }
.up-k-stroke .up-text code { background: rgb(28 27 33 / .08); }
.up-k-stroke .up-s-next .up-text code { background: rgb(244 244 246 / .1); }
.up-k-stroke .up-empty-frame { fill: #26252c; stroke: rgb(244 244 246 / .16); stroke-width: 1.5; }
.up-k-stroke .up-empty-holes { fill: var(--up-ink); }
.up-k-stroke .up-empty-gate { fill: none; stroke: rgb(244 244 246 / .14); stroke-width: 1.5; }
.up-k-stroke .up-m-next { color: var(--up-film); }
.up-k-stroke :focus-visible { outline-color: var(--up-film); }

/* ---------- ShotScript: white and orange, targets; Next is an open crosshair, Building now locks on, Just landed is a hit ---------- */
.up-lane.up-k-shotscript { background: var(--card); box-shadow: var(--shadow-sm); }
.up-k-shotscript .up-lane-ico { background: var(--up-orange-soft); }
.up-k-shotscript .up-flow { color: var(--up-orange); }
.up-k-shotscript .up-flow::before { opacity: .2; }
.up-k-shotscript .up-s-landed .up-card { background: var(--up-orange-soft); }
.up-k-shotscript .up-s-now .up-card { background: var(--card); box-shadow: inset 0 0 0 1.5px rgb(255 107 26 / .34); }
.up-k-shotscript .up-s-next .up-card { background: var(--soft); }
.up-k-shotscript .up-empty { color: var(--up-orange); }

/* ---------- Mime: black and white; Next is a still dashed box, Building now's dashes march, Just landed is drawn solid ---------- */
.up-lane.up-k-mime { color: #000; }
.up-lane.up-k-mime > .up-box { opacity: .38; }
.up-k-mime .up-flow { color: #000; }
.up-k-mime .up-flow::before { background: repeating-linear-gradient(currentColor 0 6px, transparent 6px 12px); opacity: .22; }
.up-k-mime .up-card { background: transparent; }
.up-k-mime .up-s-landed .up-card { background: var(--card); box-shadow: inset 0 0 0 2px #000; }
.up-k-mime .up-s-landed .up-card .up-box { display: none; }
.up-k-mime .up-s-landed .mm-dash { stroke-dasharray: none; }
.up-k-mime .up-s-now .up-card { background: var(--card); }
.up-k-mime .up-s-now .up-card { padding-right: 14px; }
.up-k-mime .up-s-now .up-card .up-box { opacity: .9; }
.up-k-mime .up-s-now .up-card .up-box-r { stroke-dasharray: .52 .48; }
.up-k-mime .up-s-next .up-card .up-box { opacity: .32; }
.up-k-mime .up-s-next .up-tile { opacity: .7; }
.up-k-mime .up-empty { color: #000; }

/* ---------- motion: hover answers (the lane's accent brightens), press, glide targets ---------- */
@media (prefers-reduced-motion: no-preference) {
	.up-sum, .up-card, .up-lane-ico { transition: translate var(--up-out) var(--ease), scale var(--up-out) var(--ease), box-shadow var(--up-out) var(--ease); }
	.up-sum-ico, .up-tile svg { transition: scale var(--up-out) var(--ease); }
	.up-go { transition: opacity var(--up-out) var(--ease), translate var(--up-out) var(--ease); }
	.up-flow svg, .up-flow::before, .up-sprk, .up-lane > .up-box, .up-stage-h .up-mark, .up-sum .up-box { transition: opacity var(--up-out) var(--ease), translate var(--up-out) var(--ease); }
}
.up-stage-h .up-mark { opacity: .85; }
@media (hover: hover) {
	.up-sum:hover { translate: 0 -3px; box-shadow: var(--shadow-md); transition-duration: var(--up-in); }
	.up-sum:hover .up-sum-ico { scale: 1.06; transition-duration: var(--up-in); }
	.up-sum:hover .up-go { opacity: 1; translate: 0 2px; transition-duration: var(--up-in); }
	.up-sum.up-k-mime:hover .up-box { opacity: 1; transition-duration: var(--up-in); }
	.up-lane:hover .up-flow svg { opacity: 1; translate: -3px 0; transition-duration: var(--up-in); }
	.up-lane:hover .up-flow::before { opacity: .3; transition-duration: var(--up-in); }
	.up-lane:hover .up-stage-h .up-mark { opacity: 1; transition-duration: var(--up-in); }
	.up-lane.up-k-stroke:hover .up-sprk { opacity: .3; transition-duration: var(--up-in); }
	.up-lane.up-k-mime:hover > .up-box { opacity: 1; transition-duration: var(--up-in); }
	.up-lane-h a:hover .up-lane-ico { scale: 1.06; transition-duration: var(--up-in); }
	a.up-card:hover { translate: 0 -2px; box-shadow: var(--shadow-md); transition-duration: var(--up-in); }
	.up-k-mime a.up-card:hover { box-shadow: inset 0 0 0 2px #000, var(--shadow-md); }
	.up-card:hover .up-tile svg { scale: 1.08; transition-duration: var(--up-in); }
}
a.up-card:focus-visible { translate: 0 -2px; transition-duration: var(--up-in); }
.up-sum:active { scale: .97; transition-duration: .4s; }
a.up-card:active { scale: .98; transition-duration: .4s; }
.up-lane-h a:active .up-lane-ico { scale: .92; transition-duration: .4s; }

/* ---------- phones and narrow windows: the stages stack, the flow points up ---------- */
@media (max-width: 980px) {
	.up-sums { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.up-sum { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ico name nums go"; gap: 12px; }
	.up-nums { gap: 14px; }
	.up-num b { font-size: 21px; }
	.up-sum-ico { width: 46px; height: 46px; border-radius: 14px; }
	.up-sum-img { height: 28px; max-width: 34px; }
}
@media (max-width: 860px) {
	.up-stages { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
	.up-flow { height: 34px; align-items: center; }
	.up-flow::before { display: none; }
	.up-flow svg { margin: 0; rotate: 90deg; }
	.up-lane:hover .up-flow svg { translate: 0 -3px; }
}
@media (max-width: 640px) {
	.up-head { gap: 20px; }
	.up-head .doc-status { margin-top: 14px; }
	.up-head h1 { font-size: clamp(28px, 8.6vw, 36px); }
	.up-title { gap: 12px; }
	.up-glass svg { width: 40px; }
	.up-sum { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name nums"; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 18px; }
	.up-sum-name { font-size: 14.5px; white-space: nowrap; }
	.up-sum-ico { width: 36px; height: 36px; border-radius: 11px; }
	.up-sum-img { height: 22px; }
	.up-nums { gap: 9px; }
	.up-num { gap: 4px; }
	.up-num .up-mark { width: 14px; height: 14px; }
	.up-num b { font-size: 17px; }
	.up-go { display: none; }
	.up-lanes { gap: 16px; margin-top: 16px; }
	.up-lane { padding: 22px 16px 22px; }
	.up-lane.up-k-stroke { padding-block: 36px 38px; }
	.up-sprk-t { top: 12px; }
	.up-sprk-b { bottom: 12px; }
	.up-lane-h { font-size: 20px; }
	.up-lane-ico { width: 40px; height: 40px; }
	.up-text { font-size: 14px; }
}