/*
 * Homepage journey preview (Local only): My Journey (DESIGN-SPEC §5.5 and §8; package P4).
 * The band itself, its glows and grid, the head's night colours, the night ghost, the primary's ring and the amber
 * focus come from shj-base.css. This layer adds the sign-in note, the layout, "An example week" (sources, weave, days;
 * an agenda below 768) and the week's one finite sequence, keyed on the .is-in that home.js adds only when motion is
 * welcome. Every selector starts with .shh.shj. No --sh-* definitions, no @import, no url(). Breakpoints 480/768/1024/1280.
 */

/* ---------- the sign-in note, before the buttons (§5.5.4) ---------- */
.shh.shj .shj-signin { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin-top: 18px; max-width: 60ch; font: 400 15px/1.5 var(--shh-text); color: #c3d4dd; }
.shh.shj .shj-signin > .shh-i { width: 18px; height: 18px; margin-top: 2px; color: #8fd3ef; }
.shh.shj .shj-journey-do { margin-top: 22px; }

/* ---------- An example week (§8.3): a glass panel on night ---------- */
.shh.shj .shj-week { padding: 16px; border-radius: 24px; background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .12); color: #c3d4dd; }
/* the week is a <figure>: Elementor's frontend.min.css resets figure margins at (0,4,1), so its margins are set at (0,5,0) */
.shh.shj .shj-sec--journey .shj-grid--journey > .shj-week { margin-top: 28px; }
.shh.shj .shj-week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.shh.shj .shj-week-k { font: 800 12px/1 var(--shh-text); letter-spacing: .12em; text-transform: uppercase; color: #8fb1c3; }
.shh.shj .shj-week-goal { font: 600 14px/1.3 var(--shh-text); color: #d3e2ea; }

/* the sources: pillar dots with the night ring and the node highlight; short labels on phones */
.shh.shj .shj-week-src { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: 8px; margin-top: 18px; }
.shh.shj .shj-src { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; text-align: center; font: 500 13px/1.3 var(--shh-text); color: #d3e2ea; }
.shh.shj .shj-src-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background-color: var(--shj-src-c, #246b5f); background-image: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%); box-shadow: 0 0 0 4px #0f2230, 0 10px 22px -8px rgba(0, 0, 0, .6); }
.shh.shj .shj-src-dot > .shh-i { width: 17px; height: 17px; }
.shh.shj .shj-src--checks { --shj-src-c: #246b5f; }
.shh.shj .shj-src--workouts { --shj-src-c: #2b8fd6; }
.shh.shj .shj-src--cardio { --shj-src-c: #1b6fae; }
.shh.shj .shj-src--eating { --shj-src-c: #3d9442; }
.shh.shj .shj-src-l { display: none; }

/* the weave (§8.2): solid threads that never scale their stroke; hidden on phones (decoration) */
.shh.shj .shj-weave { display: none; }
.shh.shj .shj-thr { fill: none; stroke-width: 2.5; stroke-linecap: round; opacity: .9; vector-effect: non-scaling-stroke; }
.shh.shj .shj-weave-glow > .shj-thr { stroke-width: 8; opacity: .16; }
.shh.shj .shj-thr--checks { stroke: #3fb39d; }
.shh.shj .shj-thr--workouts { stroke: #4ea6ec; }
.shh.shj .shj-thr--cardio { stroke: #8fd3ef; }
.shh.shj .shj-thr--eating { stroke: #5cb860; }

/* the days: words carry the meaning (Done, Next step); colour only links a day to its source */
.shh.shj .shj-days { display: grid; }
.shh.shj .shj-day { --shj-day-c: #8fa4b2; position: relative; display: grid; min-width: 0; }
.shh.shj .shj-day--workout { --shj-day-c: #4ea6ec; }
.shh.shj .shj-day--cardio { --shj-day-c: #8fd3ef; }
.shh.shj .shj-day--checkin { --shj-day-c: #3fb39d; }
.shh.shj .shj-day-name { font: 800 11.5px/1 var(--shh-text); letter-spacing: .1em; text-transform: uppercase; color: #b4c8d4; }
.shh.shj .shj-day-title { min-width: 0; font: 650 13.5px/1.25 var(--shh-text); color: #f2f8fb; overflow-wrap: break-word; }
.shh.shj .shj-day--rest .shj-day-title { color: #b4c8d4; }
.shh.shj .shj-day-mark { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1.2 var(--shh-text); color: #e8f1f5; }
.shh.shj .shj-day-mark > .shh-i { width: 14px; height: 14px; color: #3fb39d; }
.shh.shj .shj-day-mark--next { color: #8fd3ef; }
.shh.shj .shj-day--next::after { content: ""; position: absolute; border-radius: 12px; box-shadow: 0 0 0 2px #8fd3ef, 0 0 24px -4px rgba(143, 211, 239, .55); pointer-events: none; }

.shh.shj .shj-week-eat { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 400 13px/1.4 var(--shh-text); color: #c3d4dd; }
.shh.shj .shj-week-eat-bar { flex: none; width: 28px; height: 3px; border-radius: 3px; background: #5cb860; }
.shh.shj .shj-week-note { margin-top: 10px; font: 400 13px/1.5 var(--shh-text); color: #b4c8d4; }

/* ---------- the checklist, the trainer line, the fine print (night palette) ---------- */
.shh.shj .shj-journey-can { margin-top: 28px; }
.shh.shj .shj-journey-can > li { color: #e8f1f5; }
.shh.shj .shj-journey-can .shh-i { color: #8fd3ef; }
.shh.shj .shj-journey-trainers { margin-top: 24px; max-width: 64ch; font: 400 14.5px/1.5 var(--shh-text); color: #b4c8d4; }
.shh.shj .shj-journey-fine { display: flex; margin-top: 10px; color: #b4c8d4; }

/* ---------- phones (< 768): an agenda (§8.4) ---------- */
@media (max-width: 767px) {
	.shh.shj .shj-days { margin-top: 16px; }
	.shh.shj .shj-day { grid-template-columns: 44px 12px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 40px; padding: 6px 0; }
	.shh.shj .shj-day + .shj-day { border-top: 1px solid rgba(255, 255, 255, .08); }
	.shh.shj .shj-day-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--shj-day-c); }
	.shh.shj .shj-day--rest .shj-day-dot { background: transparent; border: 2px solid #8fa4b2; }
	.shh.shj .shj-day--next .shj-day-dot { box-shadow: 0 0 0 3px rgba(143, 211, 239, .3); }
	.shh.shj .shj-day-mark { white-space: nowrap; }
	.shh.shj .shj-day--next::after { inset: 3px -8px; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(143, 211, 239, .75), 0 0 20px -6px rgba(143, 211, 239, .55); }
}
@media (max-width: 479px) {
	.shh.shj .shj-week-src { column-gap: 4px; }
	.shh.shj .shj-day { column-gap: 8px; }
}

/* ---------- 768 and up: cells under the weave ---------- */
@media (min-width: 768px) {
	.shh.shj .shj-week { padding: 22px; }
	.shh.shj .shj-src-dot { width: 40px; height: 40px; }
	.shh.shj .shj-src-dot > .shh-i { width: 20px; height: 20px; }
	.shh.shj .shj-src-l { display: inline; }
	.shh.shj .shj-src-s { display: none; }
	.shh.shj .shj-week-src { padding-bottom: 6px; }
	/* the SVG spans the rows' outer half-gaps, so every column centre is exactly (i + .5) / n of its width */
	.shh.shj .shj-weave { display: block; width: calc(100% + 8px); max-width: none; height: 72px; margin: 0 -4px; overflow: visible; }
	.shh.shj .shj-days { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 8px; }
	.shh.shj .shj-day { align-content: start; justify-items: start; row-gap: 6px; min-height: 96px; padding: 10px 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 3px 0 var(--shj-day-c); }
	.shh.shj .shj-day--rest { background: transparent; border: 1.5px dashed rgba(143, 164, 178, .6); box-shadow: none; }
	.shh.shj .shj-day-dot { display: none; }
	.shh.shj .shj-day--next::after { inset: -1px; }
	.shh.shj .shj-journey-can { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
}

/* ---------- 1024 and up: the week left of the head (§5.5.5); one column without the week ---------- */
@media (min-width: 1024px) {
	.shh.shj .shj-grid--journey { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr auto auto auto; column-gap: 56px;
		grid-template-areas: "week head" "week signin" "week do" "can can" "tline tline" "fine fine"; }
	.shh.shj .shj-grid--journey > .shj-head { grid-area: head; }
	.shh.shj .shj-grid--journey > .shj-signin { grid-area: signin; }
	.shh.shj .shj-grid--journey > .shj-journey-do { grid-area: do; align-self: start; }
	/* below the node's row, so nothing shares it (§6.4) */
	.shh.shj .shj-sec--journey .shj-grid--journey > .shj-week { grid-area: week; align-self: start; margin-top: var(--shj-node-row); }
	.shh.shj .shj-grid--journey > .shj-journey-can { grid-area: can; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; }
	.shh.shj .shj-grid--journey > .shj-journey-trainers { grid-area: tline; }
	.shh.shj .shj-grid--journey > .shj-journey-fine { grid-area: fine; }
	.shh.shj .shj-grid--journey.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "signin" "do" "can" "tline" "fine"; }
	.shh.shj .shj-grid--journey.is-solo > .shj-journey-can { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
}
/* 1024-1279: the week's column is about 517-660 px, so the cells (about 62 px at 1024) take a compact type size */
@media (min-width: 1024px) and (max-width: 1279px) {
	.shh.shj .shj-week { padding: 16px; }
	.shh.shj .shj-day { padding: 9px 5px; }
	.shh.shj .shj-day-name { font-size: 10.5px; letter-spacing: .08em; }
	.shh.shj .shj-day-title { font-size: 12px; }
	.shh.shj .shj-day-mark { gap: 4px; font-size: 11.5px; }
	.shh.shj .shj-day-mark > .shh-i { width: 12px; height: 12px; }
}

/* ---------- the week's one sequence (§8.5): finite (about 1.8 s), never looped, motion welcome only ---------- */
@media (prefers-reduced-motion: no-preference) {
	.shh.shj .shj-week.is-in .shj-weave { animation: shj-week-unclip .9s var(--shh-ease) .1s backwards; }
	.shh.shj .shj-week.is-in .shj-day { animation: shj-week-rise .45s var(--shh-ease) backwards; animation-delay: calc(.4s + 70ms * var(--i, 0)); }
	.shh.shj .shj-week.is-in .shj-day-mark--done > .shh-i { animation: shj-week-pop .45s var(--shh-spring) 1s backwards; }
	.shh.shj .shj-week.is-in .shj-day--next::after { animation: shj-week-ring .55s var(--shh-spring) 1.2s backwards; }
}
@keyframes shj-week-unclip { from { clip-path: inset(0 -12px 100% -12px); } to { clip-path: inset(-12px); } }
@keyframes shj-week-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shj-week-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes shj-week-ring { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }