/* ShotScript's kit (22 Oct 2026, the Web Director's "ShotScript lifted"; markup shot_kit.py, motion shot-kit.js).
	The logo's orange #FF6B1A marks, fills and icons only, never text (#C2410C is its text tone); the window's grey #424A53;
	the code view's white and gutter line #D8DBE6. Every hover answers both ways on the site's curve; reduced motion makes
	every change immediate. */

/* ---------- the crosshair: the icon master, locked onto a card's tile (or a kind's badge) at its top right ---------- */
.ss-lock { position: relative; }
.ss-x { position: absolute; right: -11px; top: -11px; width: 22px; height: 22px; opacity: 0; pointer-events: none; z-index: 1; overflow: visible; }

/* ---------- a kind card's taste: its runs line and command give way to two lines of its code ---------- */
.doc.lrn .ss-slot { display: grid; margin-top: auto; }
.doc.lrn .ss-slot > * { grid-area: 1 / 1; min-width: 0; }
.ss-rest { display: flex; flex-direction: column; gap: 8px; justify-content: flex-end;
	transition: opacity .6s var(--ease), translate .6s var(--ease); }
.doc.lrn .ss-rest .lrn-runs { margin-top: 0; }
.ss-taste { display: grid; align-content: center; padding: 6px 9px; border-radius: 9px; background: #ffffff; box-shadow: inset 0 0 0 1px #d8dbe6;
	overflow: hidden; opacity: 0; translate: 0 5px; pointer-events: none; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.doc .ss-taste code { display: block; overflow: hidden; font-size: 11.5px; line-height: 1.5; white-space: pre; background: none; padding: 0; color: #000000;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent); }
@media (hover: hover) {
	.doc a.lrn-kind:hover .ss-taste { opacity: 1; translate: 0 0; transition-duration: .35s; }
	.doc a.lrn-kind:hover .ss-rest { opacity: 0; translate: 0 -5px; transition-duration: .35s; }
}
.doc a.lrn-kind:focus-visible .ss-taste { opacity: 1; translate: 0 0; transition-duration: .35s; }
.doc a.lrn-kind:focus-visible .ss-rest { opacity: 0; translate: 0 -5px; transition-duration: .35s; }

/* ---------- the shot flow: a light in each box, and the token that travels through them once ---------- */
.ss-flow { position: relative; }
.ss-flow .lrn-node { position: relative; }
.ss-lit { position: absolute; inset: -1px; border-radius: 14px; pointer-events: none; opacity: 0;
	box-shadow: 0 0 0 2px #ff6b1a, 0 10px 24px -10px rgb(255 107 26 / .6); }
.ss-token { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center;
	border-radius: 9px; background: #ffffff; color: #ff6b1a; box-shadow: 0 0 0 1.5px #ffd3ba, 0 6px 14px -4px rgb(255 107 26 / .5);
	opacity: 0; pointer-events: none; z-index: 2; }
.ss-token .lrn-i { grid-area: 1 / 1; width: 18px; height: 18px; }
.ss-tk-b { opacity: 0; }

/* ---------- tiles in the section's tones (New's entries) ---------- */
.ss-tile { display: inline-flex; width: 36px; height: 36px; border-radius: 11px; align-items: center; justify-content: center;
	background: var(--ss-soft); color: var(--ss-c); }
.ss-tile .lrn-i { width: 19px; height: 19px; }
.ss-t-accent { --ss-c: #ff6b1a; --ss-soft: #fff0e8; }
.ss-t-blue { --ss-c: #0969da; --ss-soft: #ddf4ff; }
.ss-t-purple { --ss-c: #8250df; --ss-soft: #fbefff; }
.ss-t-green { --ss-c: #1a7f37; --ss-soft: #dafbe1; }

/* ---------- New on the spine: the code view's gutter line, an orange crosshair dot at each day ---------- */
.ss-spine { --spine-accent: #424a53; }
.ss-spine .spine-day::before { background: #d8dbe6; }
.ss-spine .spine-entry::before { background: #d8dbe6; }
.ss-spine .spine-entry { transition: background-color .6s var(--ease); }
@media (hover: hover) { .ss-spine .spine-entry:hover { background: color-mix(in srgb, #ff6b1a 5%, var(--paper)); transition-duration: .35s; } }
.ss-spine .spine-node { left: -36px; top: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; rotate: 9deg;
	background: radial-gradient(closest-side, var(--card, #fff) 92%, transparent); }
.ss-spine > .spine-day:first-child .spine-node { background: radial-gradient(closest-side, var(--card, #fff) 92%, transparent); }
.ss-spine .spine-node::before { content: ""; position: absolute; inset: 0;
	background: linear-gradient(#1f2328 0 0) 50% 0 / 2.4px 7px no-repeat, linear-gradient(#1f2328 0 0) 50% 100% / 2.4px 7px no-repeat,
		linear-gradient(#1f2328 0 0) 0 50% / 7px 2.4px no-repeat, linear-gradient(#1f2328 0 0) 100% 50% / 7px 2.4px no-repeat; }
.ss-spine .spine-node::after { content: ""; position: absolute; left: 7.5px; top: 7.5px; width: 9px; height: 9px; border-radius: 50%; background: #ff6b1a; }
.ss-spine > .spine-day:first-child .spine-node::after { box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3.5px #ff6b1a; }
.ss-spine .spine-tally { color: #ff6b1a; opacity: 1; }
.ss-dots circle { fill: currentColor; }
.ss-spine .spine-body .doc-entry-title { flex-basis: auto; }

/* ---------- the missing page: the checker's error card for the address ---------- */
.ss-lost { text-align: left; }
.ss-err { max-width: 560px; margin: 4px 0 10px; border-radius: 14px; background: #ffffff; box-shadow: inset 0 0 0 1px #d8dbe6; overflow: hidden;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; line-height: 1.6; }
.ss-err-code { display: flex; padding: 12px 14px 10px 0; overflow-x: auto; }
.ss-err-n { flex: none; width: 38px; padding-right: 12px; text-align: right; color: #8c959f; user-select: none; }
.ss-err-line { display: grid; min-width: 0; white-space: pre; color: #000000; }
.ss-err-line > * { grid-area: 1 / 1; }
.ss-err-addr, .ss-squig { opacity: 0; transition: opacity .6s var(--ease); }
.ss-squig { color: transparent; pointer-events: none; }
.ss-squig .ss-sq-bad { text-decoration: underline wavy #cf222e 1.5px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.ss-err-msg { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px 12px; border-top: 1px solid #d8dbe6; background: #fffbfb;
	color: #000000; white-space: pre-wrap; }
.ss-err-ico { flex: none; margin-top: 3px; fill: none; stroke: #cf222e; stroke-width: 1.7; stroke-linecap: round; }
.ss-err-words { min-width: 0; }
.ss-err-at { color: #57606a; word-break: break-all; }
.ss-err-text { white-space: nowrap; }
.ss-err.is-addr .ss-err-addr, .ss-err.is-addr .ss-squig { opacity: 1; }

@media (max-width: 760px) {
	.ss-spine .spine-node { left: -30px; top: 6px; width: 20px; height: 20px; }
	.ss-spine .spine-node::before { background-size: 2.2px 6px, 2.2px 6px, 6px 2.2px, 6px 2.2px; }
	.ss-spine .spine-node::after { left: 6px; top: 6px; width: 8px; height: 8px; }
	.ss-spine .spine-ico .ss-tile { width: 30px; height: 30px; border-radius: 9px; }
	.ss-spine .spine-ico .ss-tile .lrn-i { width: 17px; height: 17px; }
	.ss-err { font-size: 12.5px; }
	.ss-err-n { width: 30px; padding-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.ss-rest, .ss-taste, .ss-spine .spine-entry, .ss-err-addr, .ss-squig { transition-duration: 0s !important; }
}