/*
 * Homepage journey preview (Local only): the shared base (DESIGN-SPEC §3, §4, §5.0, §9).
 * Local tokens, root isolation, bands and rules, the section head and its node variants, say colours, the night
 * button and focus, utilities and the build aids (stub note, section failure notice).
 * Every selector starts with .shh.shj or body.sh-home-v2.sh-hjp. No --sh-* is defined here, only --shj-* locals (the
 * design system's value first where it has one). Breakpoints: 480, 768, 1024, 1280.
 */

/* ---------- tokens and the root: isolated, so the thread's z-index can never rise above the header or launchers ---------- */
.shh.shj {
	--shj-ink: var(--sh-ink, #122c3a);
	--shj-copy: var(--sh-copy, #375568);
	--shj-muted: #587183;
	--shj-line: var(--sh-line, #c7ddeb);
	--shj-line-soft: #e1ecf2;
	--shj-teal: var(--sh-action, #246b5f);
	--shj-teal-deep: var(--sh-action-hover, #173d39);
	--shj-sky: var(--sh-sky, #6ec4e8);
	--shj-sky-soft: var(--sh-sky-soft, #edf8fc);
	--shj-night: #0f2230;
	--shj-node: 52px;
	--shj-node-row: calc(var(--shj-node) + 18px); /* 82px at >= 1024: blocks in another column start below the node's row */
	isolation: isolate;
}
@media (min-width: 480px) { .shh.shj { --shj-node: 56px; } }
@media (min-width: 1024px) { .shh.shj { --shj-node: 64px; } }

/* stacking contract (§3.2): content above the thread layer (z 2), band backgrounds below it; sections never stack */
.shh.shj .shj-wrap { position: relative; z-index: 3; }
.shh.shj .shh-hero-inner { z-index: 3; }

/* ---------- bands (§5.0): background, the 1px rule on top, the say colour ---------- */
.shh.shj .shj-sec { position: relative; padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 88px); background: #fff; }
.shh.shj .shj-sec--assess { --shj-say: #246b5f; background: linear-gradient(180deg, #f6fbfd 0%, #eaf5f2 100%); border-top: 1px solid var(--shh-line-soft); }
.shh.shj .shj-sec--train { --shj-say: #1b6fae; background: #fff; border-top: 1px solid var(--shh-line-soft); }
.shh.shj .shj-sec--eat { --shj-say: #2f7a34; background: linear-gradient(180deg, #ffffff 0%, #f1f8ee 100%); border-top: 1px solid var(--shh-line-soft); }
.shh.shj .shj-sec--journey { --shj-say: #8fd3ef; background: #0f2230; color: #b8ccd8; }
.shh.shj .shj-sec--help { --shj-say: #b0285a; background: linear-gradient(180deg, #ffffff 45%, #fdf4f8 100%); }
.shh.shj .shj-sec--learn { --shj-say: #8a5a06; background: #fff; border-top: 1px solid var(--shh-line-soft); }
.shh.shj .shj-sec--trainers { --shj-say: #1b6fae; background: linear-gradient(180deg, #eef8fc 0%, #dff1f9 100%); border-top: 1px solid var(--shh-line-soft); }

/* My Journey: the approved connect band's glows and 64px grid (home.css:498-504); no z-index, so it paints below the thread */
.shh.shj .shj-journey-bg { position: absolute; inset: 0; background:
	radial-gradient(40% 50% at 16% 10%, rgba(36, 107, 95, .36), rgba(36, 107, 95, 0) 70%),
	radial-gradient(50% 50% at 80% 70%, rgba(110, 196, 232, .15), rgba(110, 196, 232, 0) 70%),
	radial-gradient(30% 30% at 92% 24%, rgba(214, 51, 108, .1), rgba(214, 51, 108, 0) 70%),
	linear-gradient(180deg, #0f2230 0%, #11293a 58%, #0d2130 100%); }
.shh.shj .shj-journey-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(60% 50% at 50% 60%, #000 30%, transparent 80%); mask-image: radial-gradient(60% 50% at 50% 60%, #000 30%, transparent 80%); }

/* ---------- the section head (§4): node and H2 as one lockup below 1024; the node on its own row from 1024 ---------- */
.shh.shj .shj-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "node h2" "say say" "lead lead"; column-gap: 14px; align-items: center; justify-items: start; }
.shh.shj .shj-head > .shj-node { grid-area: node; }
.shh.shj .shj-head > .shj-h { grid-area: h2; }
.shh.shj .shj-head > .shj-say { grid-area: say; margin-top: 12px; }
.shh.shj .shj-head > .shj-lead { grid-area: lead; margin-top: 12px; }
.shh.shj .shj-say { max-width: 34ch; font: 700 clamp(1.25rem, 1rem + .7vw, 1.6rem)/1.15 var(--shh-display); letter-spacing: -.02em; text-wrap: balance; color: var(--shj-say, var(--shh-teal)); }
/* the node: never a stacking context (no transform, opacity, filter or z-index), so the thread's halo paints behind it */
.shh.shj .shj-node { position: relative; width: var(--shj-node); height: var(--shj-node); }
.shh.shj .shj-node .shh-i { width: calc(var(--shj-node) / 2); height: calc(var(--shj-node) / 2); }
.shh.shj .shj-arrive { position: absolute; pointer-events: none; } /* out of the node's grid; the thread styles it (§6.6) */
.shh.shj .shj-node--journey { background-color: #246b5f; background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%), linear-gradient(140deg, #246b5f, #2b8fd6 55%, #3d9442); }
.shh.shj .shj-node--learn { background-color: #b8740a; }
.shh.shj .shj-node--trainers { background-color: #1b6fae; }
@media (min-width: 1024px) {
	.shh.shj .shj-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "node" "h2" "say" "lead"; }
	.shh.shj .shj-head > .shj-node { margin-bottom: 18px; }
	.shh.shj .shj-head > .shj-say { margin-top: 8px; }
	.shh.shj .shj-head > .shj-lead { margin-top: 16px; }
	.shh.shj .shj-head--centre { justify-items: center; text-align: center; }
	.shh.shj .shj-head--centre > .shj-lead { margin-inline: auto; }
}

/* the head on the night band (§5.5.4), with the night ring around the node */
.shh.shj .shj-sec--journey .shj-h { color: #f2f8fb; }
.shh.shj .shj-sec--journey .shj-lead { color: #b4c8d4; }
.shh.shj .shj-sec--journey .shj-node { box-shadow: 0 0 0 7px #0f2230, 0 14px 26px -12px rgba(0, 0, 0, .6); }

/* ---------- the night ghost (owner decision O8) and the primary on night (O14) ---------- */
.shh.shj .shh-btn.shj-btn--night { background: transparent; color: #e8f1f5; border-color: rgba(232, 241, 245, .5); white-space: nowrap; }
.shh.shj .shh-btn.shj-btn--night:hover, .shh.shj .shh-btn.shj-btn--night:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; border-color: #e8f1f5; white-space: nowrap; transform: translateY(-2px); }
.shh.shj .shj-sec--journey .shh-btn--primary { box-shadow: 0 0 0 1px rgba(143, 211, 239, .35), 0 14px 28px -12px rgba(0, 0, 0, .6); }
/* focus on the night band: amber, 7.7:1 on night (above the page's ink ring, home.css:71) */
body.sh-home-v2.sh-hjp .shh .shj-sec--journey :focus-visible { outline: 3px solid #e6a817 !important; outline-offset: 3px !important; box-shadow: none !important; }

/* ---------- utilities ---------- */
.shh.shj .shj-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- build aids: a stub section's note, and the notice printed before a section that failed ---------- */
.shh.shj .shj-stub { margin-top: 28px; max-width: 62ch; padding: 16px 20px; border: 1.5px dashed var(--shh-line); border-radius: 18px; font: 600 15px/1.45 var(--shh-text); color: var(--shh-copy); }
.shh.shj .shj-sec--journey .shj-stub { border-color: rgba(255, 255, 255, .24); color: #c3d4dd; }
.shh.shj .shj-sec-error { padding-block: 14px; background: #fdf4f8; border-block: 2px solid #b0285a; color: #5e1a39; font: 600 15px/1.5 var(--shh-text); }
.shh.shj .shj-sec-error-at { font: 600 13px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
@media (min-width: 1024px) {
	.shh.shj .shj-stub { margin-top: 40px; }
	.shh.shj .shj-head--centre + .shj-stub { margin-inline: auto; text-align: center; }
	/* a stub keeps the final zig-zag: a "col" head sits at the left edge of its section's right column (Train §5.3.3,
	   My Journey §5.5.5), where the built node will be; stubs only (a built section has no .shj-stub) */
	.shh.shj .shj-sec--train .shj-wrap:has(> .shj-stub) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 64px; }
	.shh.shj .shj-sec--journey .shj-wrap:has(> .shj-stub) { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
	.shh.shj .shj-wrap:has(> .shj-stub) > .shj-head--col, .shh.shj .shj-head--col ~ .shj-stub { grid-column: 2; }
}