/* Course area blocks (class-blocks.php). Colours, type and the session row itself come from the theme (.jg-lesson …);
   this only lays out what the blocks print without the editor's layout classes. */
.jg-outline { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.jg-outline .jg-lesson { display: flex; flex-wrap: nowrap; align-items: center; }
.jg-lesson.is-soon { box-shadow: none; background: transparent; outline: 1px dashed var(--wp--preset--color--accent-6); outline-offset: -1px; }
.jg-lesson.is-soon :is(h3, .jg-step__num) { opacity: 0.6; }
.jg-session-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; justify-content: space-between; }

/* Progress (class-progress.php): states of a session row. is-open = the next one to do (highlighted by the theme),
   is-done = completed (teal tick), is-unlocked = open but not next (Jane's preview, taster), is-locked = its turn has
   not come, is-soon = material not published yet. */
.jg-lesson.is-link:hover { box-shadow: inset 4px 0 0 var(--wp--preset--color--accent-2), var(--wp--preset--shadow--card); }
.jg-lesson.is-done .jg-step__num { background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--base); }
.jg-lesson.is-done .jg-lesson__status { color: #1B5C64; }
.jg-lesson.is-locked { background: transparent; box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6); }
.jg-lesson.is-locked :is(h3, .jg-step__num, .jg-lesson__meta) { opacity: 0.55; }
.jg-lesson.is-locked .jg-lesson__status::before {
	content: ""; display: inline-block; width: 0.95em; height: 0.95em; margin-right: 0.35em; vertical-align: -0.1em; background: currentColor;
	-webkit-mask: var(--jg-icon-lock) center / contain no-repeat; mask: var(--jg-icon-lock) center / contain no-repeat;
}
:root { --jg-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

.jg-progress { margin: 0 0 var(--wp--preset--spacing--40); }
.jg-progress__text { margin: 0 0 0.4rem; font-size: 0.95rem; color: var(--wp--preset--color--accent-4); }
.jg-progress__text strong { color: var(--wp--preset--color--primary-dark); }
.jg-progress__bar { height: 8px; border-radius: 99px; background: var(--wp--preset--color--accent-6); overflow: hidden; }
.jg-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--wp--preset--color--accent-2); transition: width 400ms ease; }

.jg-notice {
	margin: 0 0 var(--wp--preset--spacing--40); padding: 0.9rem 1.1rem; border-radius: 12px;
	background: #E6F1F2; color: #1B5C64; font-weight: 600;
}
.jg-notice a { color: inherit; }

.jg-session-nav { align-items: center; }
.jg-session-nav__forward { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-left: auto; }
.jg-session-nav__done { margin: 0; font-weight: 600; color: #1B5C64; }
.jg-complete { margin: 0; }
.jg-complete button { cursor: pointer; }

/* My courses */
.jg-mycourses { display: grid; gap: var(--wp--preset--spacing--50); }
.jg-mycourse {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; overflow: hidden; border-radius: 16px;
	background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6), var(--wp--preset--shadow--card);
}
.jg-mycourse__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jg-mycourse__body { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
.jg-mycourse__body h2 { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--x-large); }
/* "Purchased 15 October 2026 · Lifetime access · Receipt": what sets a bought course apart from a sales card. */
.jg-mycourse__meta { margin: 0 0 1rem; font-size: 0.9rem; color: var(--wp--preset--color--accent-4); }
.jg-mycourse__meta a { color: var(--wp--preset--color--accent-3); }
/* Once, after a purchase: soft teal ("done") panel above the courses; the card below keeps the one coral button. */
.jg-welcome {
	display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem; border-radius: 16px;
	background: #E6F1F2; color: #1B5C64; animation: jg-fade-in 400ms ease-out both;
}
.jg-welcome__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wp--preset--color--accent-2); color: #fff; }
.jg-welcome__icon svg { width: 1.25rem; height: 1.25rem; }
.jg-welcome__title { margin: 0.2rem 0 0.25rem; font-size: var(--wp--preset--font-size--large); color: #1B5C64; }
.jg-welcome__text { margin: 0; color: var(--wp--preset--color--contrast); }
@media (prefers-reduced-motion: reduce) { .jg-welcome { animation: none; } }
.jg-mycourse__body .wp-block-buttons { margin-top: 0.5rem; }
.jg-mycourse.has-no-image { grid-template-columns: 1fr; }
@media (max-width: 640px) { .jg-mycourse { grid-template-columns: 1fr; } .jg-mycourse__img { aspect-ratio: 16 / 9; height: auto; } }
@media (prefers-reduced-motion: reduce) { .jg-progress__bar span { transition: none; } }
/* Phones: the main action first and full width, "All sessions" under it. */
@media (max-width: 600px) {
	.jg-session-nav { flex-direction: column-reverse; align-items: stretch; }
	.jg-session-nav__forward { margin-left: 0; flex-direction: column; align-items: stretch; text-align: center; }
	.jg-session-nav .wp-block-button, .jg-complete, .jg-complete .wp-block-button__link { width: 100%; }
	.jg-session-nav .wp-block-button__link { display: block; text-align: center; }
}

/* Breadcrumbs at the top of a session / reading page (back-link block). Links look like the site's links (blue,
   underlined, sentence case) so they read as the way back, not as one more uppercase label; the current page is
   plain text. Each link has a 44px tap area. */
.jg-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.jg-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.jg-crumbs li + li::before { content: "›"; color: var(--wp--preset--color--accent-4); font-size: 1.15em; line-height: 1; }
.jg-crumbs a {
	display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--wp--preset--color--accent-3);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.jg-crumbs a:hover { color: var(--wp--preset--color--primary-dark); text-decoration-thickness: 2px; }
.jg-crumbs [aria-current] { color: var(--wp--preset--color--accent-4); }
.jg-page-header .jg-crumbs + * { margin-top: 0.25rem; }

/* Sign-in (class-sign-in.php): one white card on the sand band, one coral action, inputs as on the contact form
   (MASTER.md: 48px, radius 8px, blue focus ring); errors under their field, linked by aria-describedby. */
.jg-signin {
	padding: 2.5rem 2.25rem; border-radius: 16px;
	background: var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--card);
}
.jg-signin h1 { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--x-large); }
.jg-signin__lead { margin: 0 0 1.5rem; color: var(--wp--preset--color--accent-4); overflow-wrap: anywhere; }
.jg-signin__lead strong { color: var(--wp--preset--color--contrast); }
.jg-signin__form { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.jg-signin__form label { font-weight: 600; color: var(--wp--preset--color--contrast); }
.jg-signin__form :is(input[type="email"], input[type="text"]) {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.75rem 1rem;
	font: inherit; font-size: 1.0625rem; color: var(--wp--preset--color--contrast);
	border: 1px solid #C9C1B4; border-radius: 8px; background: #fff;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.jg-signin__form :is(input[type="email"], input[type="text"]):focus-visible {
	outline: none; border-color: var(--wp--preset--color--accent-3); box-shadow: 0 0 0 3px rgba(21, 88, 160, 0.25);
}
.jg-signin__form input[aria-invalid="true"] { border-color: #8A1C12; }
.jg-signin__form input[aria-invalid="true"]:focus-visible { border-color: #8A1C12; box-shadow: 0 0 0 3px rgba(138, 28, 18, 0.2); }
.jg-signin__form .jg-signin__code {
	font-size: 1.75rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums;
	padding-left: calc(1rem + 0.35em); /* letter-spacing adds space after the last digit too: keep the code centred */
}
.jg-field-hint, .jg-field-error { margin: 0; font-size: 0.9375rem; }
.jg-field-hint { color: var(--wp--preset--color--accent-4); }
.jg-field-error { color: #8A1C12; font-weight: 600; }   /* 8.1:1 */
.jg-signin .cf-turnstile { margin-top: 0.5rem; }
.jg-signin__form button { margin-top: 1rem; width: 100%; min-height: 48px; justify-content: center; text-align: center; cursor: pointer; }
.jg-signin__form button:disabled { cursor: progress; opacity: 0.85; }
.jg-signin__help { margin: 1.25rem 0 0; font-size: 0.95rem; text-align: center; color: var(--wp--preset--color--accent-4); }
.jg-notice.is-error { background: #FDECEA; color: #8A1C12; }
@media (max-width: 600px) { .jg-signin { padding: 1.75rem 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .jg-signin__form input { transition: none; } }

/* Course access (block course-access): the way back into a course from any page. Secondary to the page's own
   coral action, so an outline button; band = soft teal strip on a page (online courses), footer = dark footer column. */
.jg-access { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.jg-access p { margin: 0; }
.jg-access__text { flex: 1 1 18rem; }
.jg-access__title { font-weight: 700; }
.jg-access__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.jg-access.is-band { justify-content: space-between; }
.jg-access.is-band .jg-access__title { font-family: var(--wp--preset--font-family--lora); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--primary-dark); }
.jg-access.is-band .jg-access__lead { color: #1B5C64; }
.jg-access.is-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
.jg-access.is-footer .jg-access__text { flex: none; }
.jg-access.is-footer .jg-access__title { margin-bottom: 0.5rem; }
@media (max-width: 600px) {
	.jg-access.is-band .jg-access__actions { width: 100%; }
	.jg-access.is-band .wp-block-button { flex: 1 1 auto; }
	.jg-access.is-band .wp-block-button__link { width: 100%; justify-content: center; }
}
/* The band sits flush between full-width sections (no block gap above or below it). */
.jg-access-band, .jg-access-band + * { margin-block-start: 0 !important; }
/* Teal outline = open your material (MASTER.md button roles); blue outline stays "go back". */
.jg-access.is-band .wp-block-button.is-style-outline .wp-block-button__link { color: #1B5C64; border-color: #1B5C64; }
.jg-access.is-band .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #22707A; border-color: #22707A; color: #fff; }

/* Avatar: photo or initials on soft teal (class-account.php). */
.jg-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.jg-avatar.is-initials { background: #E6F1F2; color: #1B5C64; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.jg-avatar.is-large { width: 96px; height: 96px; font-size: 2rem; }

/* Header account menu: avatar + first name; a small panel underneath. Sign out is set apart (separator). */
.jg-account-menu { position: relative; }
.jg-account-menu summary {
	display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.25rem 0.5rem 0.25rem 0.25rem;
	border-radius: 999px; cursor: pointer; list-style: none; color: var(--wp--preset--color--contrast); font-weight: 600;
	transition: background-color 150ms ease-out;
}
.jg-account-menu summary::-webkit-details-marker { display: none; }
.jg-account-menu summary:hover, .jg-account-menu[open] summary { background: var(--wp--preset--color--accent-5); }
.jg-account-menu__chevron { width: 18px; height: 18px; transition: transform 150ms ease-out; }
.jg-account-menu[open] .jg-account-menu__chevron { transform: rotate(180deg); }
.jg-account-menu__panel {
	position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 100; min-width: 15rem; padding: 0.5rem;
	display: flex; flex-direction: column; border-radius: 12px; background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6), var(--wp--preset--shadow--lifted);
}
.jg-account-menu__panel a {
	display: flex; align-items: center; min-height: 44px; padding: 0 0.85rem; border-radius: 8px;
	color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 500;
}
.jg-account-menu__panel a:hover { background: var(--wp--preset--color--accent-5); }
.jg-account-menu__panel .jg-account-menu__out { color: #8A1C12; }
.jg-account-menu__out { margin-top: 0.35rem; border-top: 1px solid var(--wp--preset--color--accent-6); border-radius: 0 0 8px 8px !important; padding-top: 0.35rem !important; }
/* Signed in: the account menu takes the place of the header's "Start your course today". */
.jg-signed-in header .wp-block-buttons { display: none; }
@media (max-width: 600px) {
	.jg-account-menu__name, .jg-account-menu__chevron { display: none; }
	.jg-account-menu summary { padding: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) { .jg-account-menu summary, .jg-account-menu__chevron { transition: none; } }

/* My courses with nothing bought yet: one calm card, one coral action. */
.jg-empty {
	display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center;
	padding: 3rem 2rem; border-radius: 16px; background: var(--wp--preset--color--accent-5);
}
.jg-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #E6F1F2; color: #1B5C64; }
.jg-empty__icon svg { width: 36px; height: 36px; }
.jg-empty h2 { margin: 0.5rem 0 0; font-size: var(--wp--preset--font-size--x-large); }
.jg-empty p { margin: 0; max-width: 30rem; color: var(--wp--preset--color--accent-4); }
.jg-empty .wp-block-buttons { margin-top: 0.75rem; justify-content: center; }

/* /account/: cards with one job each; fields as on the sign-in page. */
.jg-account { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); }
.jg-account__card {
	padding: 2rem 2.25rem; border-radius: 16px; background: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6), var(--wp--preset--shadow--card);
}
.jg-account__card h2 { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--x-large); }
.jg-account__lead { margin: 0 0 1.25rem; color: var(--wp--preset--color--accent-4); overflow-wrap: anywhere; }
.jg-account__lead strong { color: var(--wp--preset--color--contrast); }
.jg-account form { margin: 0; }
.jg-account .wp-block-buttons { margin-top: 1.25rem; }
.jg-account button { cursor: pointer; }
.jg-linkbutton { font-family: inherit; }
.jg-account__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.25rem; }
.jg-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.jg-field label { font-weight: 600; color: var(--wp--preset--color--contrast); }
.jg-account :is(input[type="text"], input[type="email"]) {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.75rem 1rem; font: inherit; font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast); border: 1px solid #C9C1B4; border-radius: 8px; background: #fff;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.jg-account :is(input[type="text"], input[type="email"]):focus-visible { outline: none; border-color: var(--wp--preset--color--accent-3); box-shadow: 0 0 0 3px rgba(21, 88, 160, 0.25); }
.jg-account input[aria-invalid="true"] { border-color: #8A1C12; }
.jg-account .jg-code { max-width: 14rem; font-size: 1.5rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.jg-linkbutton {
	padding: 0; border: 0; background: none; min-height: 44px; color: var(--wp--preset--color--accent-3);
	text-decoration: underline; text-underline-offset: 0.2em; font-size: 0.95rem;
}
.jg-account__change summary {
	display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--wp--preset--color--accent-3);
}
.jg-account__change[open] summary { margin-bottom: 0.75rem; }
.jg-devices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jg-device { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--wp--preset--color--accent-6); }
.jg-device:first-child { border-top: 0; padding-top: 0; }
.jg-device svg { flex: none; width: 28px; height: 28px; color: var(--wp--preset--color--accent-4); }
.jg-device p { margin: 0; }
.jg-device__name { font-weight: 600; }
.jg-device__meta { font-size: 0.95rem; color: var(--wp--preset--color--accent-4); }
.jg-badge { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: #E6F1F2; color: #1B5C64; font-size: 0.8rem; font-weight: 600; vertical-align: 0.1em; }
/* Sign out: a danger outline (deep red #8A1C12, 8.1:1 on white), set apart below the cards — not coral, which means
   "the next step". */
.jg-account__out { margin: 0 !important; }
.jg-btn-danger.is-style-outline .wp-block-button__link { color: #8A1C12 !important; border-color: #8A1C12 !important; }
.jg-btn-danger.is-style-outline .wp-block-button__link:hover { background: #8A1C12 !important; color: #fff !important; }
.jg-notice.is-ok { background: #E7F2EE; color: #1E5631; }
@media (max-width: 600px) {
	.jg-account__card { padding: 1.5rem 1.25rem; }
	.jg-empty { padding: 2.25rem 1.25rem; }
}

/* Account page, v2 (Interactivity API): who you are at the top of the first card, a big avatar that opens the photo
   picker, smaller card headings, a spinner inside a busy button and a status line next to it. */
.jg-account__card h2 { font-size: 1.5rem; }
.jg-account__subhead { margin: 0 0 1rem !important; font-size: 1.125rem !important; font-family: var(--wp--preset--font-family--open-sans); font-weight: 700; color: var(--wp--preset--color--contrast); }
.jg-profile__head { display: flex; align-items: center; gap: 1.75rem; padding-bottom: 1.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.jg-avatar.is-large { width: 120px; height: 120px; font-size: 2.5rem; }
.jg-profile__avatar-wrap { position: relative; flex: none; }
.jg-profile__avatar { position: relative; display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.jg-profile__avatar:focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 4px; }
.jg-profile__busy { position: absolute; inset: 0; display: none; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.6); color: var(--wp--preset--color--accent-3); font-size: 1.75rem; }
.jg-profile__avatar.is-busy .jg-profile__busy { display: grid; }
.jg-profile__busy .jg-spinner { display: inline-block; margin: 0; }
/* Photo menu: under the avatar, text + icon items, Remove set apart in danger red. */
.jg-photo-menu {
	position: absolute; left: 0; top: calc(100% + 0.5rem); z-index: 20; min-width: 15rem; padding: 0.5rem; display: flex; flex-direction: column;
	border-radius: 12px; background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent-6), var(--wp--preset--shadow--lifted);
}
.jg-photo-menu button {
	display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.85rem; border: 0; border-radius: 8px; background: none;
	font: inherit; font-weight: 500; color: var(--wp--preset--color--contrast); text-align: left; cursor: pointer;
}
.jg-photo-menu button:hover, .jg-photo-menu button:focus-visible { background: var(--wp--preset--color--accent-5); outline: none; }
.jg-photo-menu svg { width: 20px; height: 20px; flex: none; }
.jg-photo-menu .is-danger { margin-top: 0.35rem; border-top: 1px solid var(--wp--preset--color--accent-6); border-radius: 0 0 8px 8px; color: #8A1C12; }
.jg-profile__avatar .jg-avatar { transition: filter 150ms ease-out; }
.jg-profile__avatar:hover .jg-avatar { filter: brightness(0.92); }
.jg-profile__camera {
	position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--accent-3); box-shadow: 0 2px 8px rgba(31, 42, 55, 0.18);
}
.jg-profile__camera svg { width: 18px; height: 18px; }
.jg-profile__who { min-width: 0; }
.jg-profile__who p { margin: 0; }
.jg-profile__name { font-family: var(--wp--preset--font-family--lora); font-size: 1.6rem; font-weight: 700; line-height: 1.25; color: var(--wp--preset--color--primary-dark); overflow-wrap: anywhere; }
.jg-profile__meta { color: var(--wp--preset--color--accent-4); font-size: 0.975rem; overflow-wrap: anywhere; }
.jg-profile__photo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.9rem; }   /* no-JS forms */
.jg-profile__photo form { margin: 0; }
.jg-profile__photo .wp-block-button__link { padding: calc(0.6rem - 2px) calc(1.25rem - 2px); min-height: 44px; font-size: 0.975rem; }
.jg-account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; }
.jg-account__actions .wp-block-button { margin: 0; }
.jg-account .wp-block-button__link:disabled { opacity: 0.45; cursor: not-allowed; }
.jg-account .wp-block-button.is-style-outline .wp-block-button__link:disabled:hover { background: transparent; color: var(--wp--preset--color--accent-3); }
.jg-status { margin: 0; min-height: 1.5em; font-weight: 600; color: #1E5631; }   /* 7.5:1 */
.jg-status:empty { min-height: 0; }
.jg-status.is-error { color: #8A1C12; }
.jg-profile__who .jg-status { margin-top: 0.5rem; }
.jg-status .jg-linkbutton { min-height: 0; font-size: inherit; font-weight: 600; }
.jg-spinner { display: none; width: 1em; height: 1em; margin-right: 0.5em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: jg-spin 700ms linear infinite; vertical-align: -0.15em; }
.is-busy > .jg-spinner { display: inline-block; }
.is-busy { pointer-events: none; }
@keyframes jg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jg-spinner { animation-duration: 1.6s; } }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Photo crop dialog (Cropper.js): a round mask over a square crop. */
.jg-cropper {
	width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 1.5rem; border: 0; border-radius: 16px;
	background: var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--lifted); color: var(--wp--preset--color--contrast);
}
.jg-cropper::backdrop { background: rgba(15, 63, 115, 0.55); }
.jg-cropper h2 { margin: 0 0 0.25rem; font-size: 1.5rem; }
.jg-cropper h2:focus { outline: none; }   /* focused on open so the slider doesn't start with a ring */
.jg-cropper__hint { margin: 0 0 1rem; color: var(--wp--preset--color--accent-4); font-size: 0.95rem; }
.jg-cropper__stage { height: min(360px, 70vw); border-radius: 12px; overflow: hidden; background: #1F2A37; }
.jg-cropper__stage img { display: block; max-width: 100%; }
.jg-cropper .cropper-view-box, .jg-cropper .cropper-face { border-radius: 50%; }
.jg-cropper .cropper-view-box { outline: 0; box-shadow: 0 0 0 2px #fff; }
.jg-cropper .cropper-modal { background: #000; opacity: 0.55; }
.jg-cropper__zoom { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 0; font-weight: 600; }
.jg-cropper__zoom input { flex: 1; accent-color: var(--wp--preset--color--accent-3); min-height: 44px; }
.jg-cropper__actions { display: flex; justify-content: flex-end; align-items: center; gap: 1.25rem; margin-top: 1rem; }
@media (max-width: 600px) {
	.jg-profile__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
	.jg-avatar.is-large { width: 96px; height: 96px; font-size: 2rem; }
}
/* Directives toggle `hidden`; layout rules (display: flex …) must not win over it. */
.jg-account [hidden] { display: none !important; }
/* A busy button is working, not unavailable: full strength while the spinner turns. */
.jg-account .wp-block-button__link.is-busy:disabled { opacity: 1; cursor: progress; }

/* Card headings with an icon (Email, Your devices). */
.jg-card-title { display: flex; align-items: center; gap: 0.75rem; }
.jg-card-title__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #E6F1F2; color: #1B5C64; }
.jg-card-title__icon svg { width: 22px; height: 22px; }

/* Email card: the address as a row with a small "Change", then the steps (edit → check your inbox). */
.jg-email-row { display: flex; align-items: center; gap: 0.75rem; min-height: 64px; box-sizing: border-box; padding: 0.85rem 1rem; border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px; background: #FBF9F5; }
.jg-email-row__icon { display: flex; color: var(--wp--preset--color--accent-4); }
.jg-email-row__icon svg { width: 20px; height: 20px; }
.jg-email-row__address { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--wp--preset--color--contrast); }
.jg-chip {
	flex: none; min-height: 36px; padding: 0 1rem; border: 1.5px solid var(--wp--preset--color--accent-3); border-radius: 999px;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--accent-3); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}
.jg-chip:hover { background: var(--wp--preset--color--accent-3); color: #fff; }
/* While the address is being changed, "Change" steps aside but keeps its place: the row must not jump. */
.jg-chip.is-invisible { visibility: hidden; }
@media (pointer: coarse) { .jg-chip { min-height: 44px; } }
.jg-account__hint { margin: 0.6rem 0 0; font-size: 0.95rem; color: var(--wp--preset--color--accent-4); }
.jg-email-edit { margin-top: 1.25rem; }
.jg-email-edit .jg-account__actions .jg-linkbutton { font-size: 1rem; }
.jg-code-panel { margin-top: 1.25rem; padding: 1.25rem 1.25rem 1rem; border-radius: 12px; background: #EEF6F7; }
.jg-code-panel__head { display: flex; gap: 0.9rem; margin-bottom: 1rem; }
.jg-code-panel__head p { margin: 0; }
.jg-code-panel__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #1B5C64; }
.jg-code-panel__icon svg { width: 22px; height: 22px; }
.jg-code-panel__title { font-weight: 700; color: var(--wp--preset--color--contrast); }
.jg-code-panel__head strong { overflow-wrap: anywhere; }
.jg-code-panel__more { margin: 1rem 0 0; font-size: 0.95rem; color: var(--wp--preset--color--accent-4); }
.jg-code-panel__more .jg-linkbutton { min-height: 0; font-size: inherit; }
.jg-code-panel__more .jg-linkbutton:disabled { color: var(--wp--preset--color--accent-4); text-decoration: none; cursor: default; }
.jg-inline-form { display: inline; }
.jg-account input.jg-code-input {
	max-width: 15rem; padding-left: calc(1rem + 0.45em); text-align: center; background: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.75rem; font-weight: 600; letter-spacing: 0.45em; font-variant-numeric: tabular-nums;
}
/* Success statuses carry a tick (colour is not the only sign). */
.jg-status:not(.is-error):not(:empty)::before {
	content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em; vertical-align: -0.15em; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jg-account__card > .jg-status { margin-top: 1rem; }

/* Footer, signed in: the site's tagline, as it was before the course-access block (Lora italic, large). */
.jg-footer-tagline { margin: 0; font-family: var(--wp--preset--font-family--lora); font-style: italic; font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
/* Staff on /account/: the students' subtitle doesn't apply (the page points them to wp-admin). */
.jg-staff .jg-account-lead { display: none; }

/* Checkout (class-checkout.php): the course on the left, one white card on the right with our form (step 1), then
   Stripe's own form in the same card (step 2); stacked on phones. Inputs and errors as on the sign-in card. */
.jg-checkout [hidden] { display: none !important; }
/* The card is as wide as Stripe's form (its fields: a 378px column) plus our padding, on both steps, so nothing jumps
   between them and Stripe's form fills the card instead of floating in a wide one. */
.jg-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 452px); gap: var(--wp--preset--spacing--60); align-items: start; }
.jg-checkout--done { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
.jg-checkout__summary { position: sticky; top: 2rem; }
.jg-checkout__cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; margin: 0 0 1.25rem; }
.jg-checkout__title { margin: 0.25rem 0 0.75rem; font-size: var(--wp--preset--font-size--x-large); }
.jg-checkout__price { margin: 0 0 0.5rem; color: var(--wp--preset--color--accent-4); }
.jg-checkout__price strong { font-size: 1.5rem; color: var(--wp--preset--color--primary-dark); }
.jg-checkout__includes { margin: 0 0 1rem; color: var(--wp--preset--color--accent-4); }
.jg-checkout__back { margin: 0; font-size: 0.95rem; }
.jg-checkout__main {
	padding: 2.25rem 2.25rem 2rem; border-radius: 16px;
	background: var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--card);
}
.jg-checkout__main h1 { margin: 0 0 0.75rem; font-size: var(--wp--preset--font-size--x-large); }
.jg-checkout__lead { margin: 0 0 1.5rem; overflow-wrap: anywhere; }
/* Checkout steps: a progress bar cut in two. Current = brand blue, done = teal with ✓ (teal is "done" across the
   course pages), next = sand. No coral: that stays the one step-forward button of the screen. */
.jg-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.jg-steps__item { position: relative; display: flex; align-items: center; gap: 0.6rem; padding-top: 0.9rem; color: var(--wp--preset--color--accent-4); font-size: 0.95rem; }
.jg-steps__item::before, .jg-steps__item::after { content: ""; position: absolute; top: 0; left: 0; height: 4px; border-radius: 99px; }
.jg-steps__item::before { right: 0; background: #E5DED2; }
.jg-steps__item::after { width: 0; background: var(--wp--preset--color--accent-3); transition: width 300ms ease-out, background-color 300ms ease-out; }
.jg-steps__num {
	position: relative; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
	border: 1.5px solid #C9C1B4; font-size: 0.85rem; font-weight: 600; line-height: 1;
	transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out;
}
.jg-steps__item[aria-current="step"] { color: var(--wp--preset--color--contrast); font-weight: 600; }
.jg-steps__item[aria-current="step"]::after { width: 100%; }
.jg-steps__item[aria-current="step"] .jg-steps__num { background: var(--wp--preset--color--accent-3); border-color: var(--wp--preset--color--accent-3); color: #fff; }
/* Payment step: the details step is done. */
.is-paying .jg-steps__item:first-child { color: var(--wp--preset--color--contrast); }
.is-paying .jg-steps__item:first-child::after { width: 100%; background: var(--wp--preset--color--accent-2); }
.is-paying .jg-steps__item:first-child .jg-steps__num { background: var(--wp--preset--color--accent-2); border-color: var(--wp--preset--color--accent-2); color: transparent; }
.is-paying .jg-steps__item:first-child .jg-steps__num::before { content: "✓"; color: #fff; position: absolute; font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .jg-steps__item::after, .jg-steps__num { transition: none; } }
.jg-checkout__form { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.jg-checkout__form label:not(.jg-check) { font-weight: 600; color: var(--wp--preset--color--contrast); }
.jg-checkout__form :is(input[type="email"], input[type="text"]) {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: 0.75rem 1rem; margin-bottom: 0.6rem;
	font: inherit; font-size: 1.0625rem; color: var(--wp--preset--color--contrast);
	border: 1px solid #C9C1B4; border-radius: 8px; background: #fff;
	transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.jg-checkout__form :is(input[type="email"], input[type="text"]):focus-visible {
	outline: none; border-color: var(--wp--preset--color--accent-3); box-shadow: 0 0 0 3px rgba(21, 88, 160, 0.25);
}
.jg-checkout__form input[aria-invalid="true"] { border-color: #8A1C12; }
.jg-checkout__form .jg-field-hint { margin: -0.4rem 0 0.6rem; }
.jg-checkout__who { margin: 0 0 1rem; overflow-wrap: anywhere; }
.jg-check { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0.4rem 0; font-size: 0.975rem; line-height: 1.5; cursor: pointer; }
.jg-check input { flex: none; width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--wp--preset--color--accent-3); cursor: pointer; }
.jg-check input[aria-invalid="true"] { outline: 2px solid #8A1C12; outline-offset: 2px; }
.jg-checkout .cf-turnstile { margin-top: 0.5rem; }
.jg-checkout__form .jg-notice { margin: 0.75rem 0 0; }
.jg-checkout__form button[type="submit"] { margin-top: 1rem; width: 100%; min-height: 48px; justify-content: center; text-align: center; cursor: pointer; }
.jg-checkout__form button:disabled { cursor: progress; opacity: 0.85; }
.jg-checkout__secure { margin: 0.75rem 0 0; font-size: 0.9rem; text-align: center; color: var(--wp--preset--color--accent-4); }
/* Step 2: Stripe's own form fills the card (it brings its padding). */
.jg-checkout__main.is-paying { padding: 1.5rem 0.75rem 0.75rem; }
.jg-checkout__main { container-type: inline-size; }
/* Stripe's fields sit in a column of at most 378px, centred in its frame, at least ~17px from the edges (measured
   2026-10-15 at 390–1440px): the steps take the same column on the payment step. */
.is-paying .jg-steps { margin: 0 max(17px, calc((100cqw - 378px) / 2)) 1.5rem; }
/* The done step is the way back: the whole "✓ Your details" is a button (disabled on step 1). */
.jg-steps__back {
	display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0; border: 0; border-radius: 6px;
	background: none; font: inherit; color: inherit; text-align: left; cursor: default;
}
.jg-steps__back:not(:disabled) { cursor: pointer; }
.jg-steps__back:not(:disabled):hover .jg-steps__label { text-decoration: underline; text-underline-offset: 3px; }
.jg-steps__back:focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 4px; }
.jg-link-button { padding: 0; white-space: nowrap; border: 0; background: none; font: inherit; color: var(--wp--preset--color--accent-3); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.jg-link-button:hover { color: var(--wp--preset--color--primary-dark); }
.jg-checkout__stripe { position: relative; min-height: 460px; }
.jg-checkout__loading {
	position: absolute; inset: 0 0 auto; margin: 0; padding: 4rem 1rem; text-align: center;
	color: var(--wp--preset--color--accent-4); animation: jg-breathe 1.6s ease-in-out infinite;
}
.jg-checkout__stripe.is-ready .jg-checkout__loading { display: none; }
.jg-checkout__stripe.is-ready iframe { animation: jg-fade-in 400ms ease-out both; }
@keyframes jg-breathe { 50% { opacity: 0.45; } }
@keyframes jg-fade-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
	.jg-checkout__loading, .jg-checkout__stripe.is-ready iframe { animation: none; }
}
@media (max-width: 781px) {
	.jg-checkout { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
	.jg-checkout__summary { position: static; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
	.jg-checkout__cover { grid-row: span 3; aspect-ratio: 1; margin: 0; border-radius: 12px; }
	.jg-checkout__summary .jg-eyebrow, .jg-checkout__includes, .jg-checkout__back { display: none; }
	.jg-checkout__title { margin: 0 0 0.25rem; font-size: var(--wp--preset--font-size--large); }
	.jg-checkout__price { margin: 0; font-size: 0.95rem; }
	.jg-checkout__price strong { font-size: 1.15rem; }
	.jg-checkout__main { padding: 1.75rem 1.25rem; }
	.jg-checkout__main.is-paying { padding: 1.25rem 0.25rem 0.25rem; }
}

/* Online courses hero, signed in (block course-panel): the student's course in place of Jane's photo (first on a phone:
   the theme already stacks the hero's columns in reverse).
   Its button is the screen's one coral button, so the hero's own "See the courses" becomes a blue outline next to it. */
.jg-course-panel {
	padding: 1.75rem; border-radius: 16px; background: var(--wp--preset--color--base); box-shadow: var(--wp--preset--shadow--card);
	animation: jg-fade-in 400ms ease-out both;
}
.jg-course-panel__hello { margin: 0 0 0.35rem; font-family: var(--wp--preset--font-family--heading, Lora, serif); font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--wp--preset--color--primary-dark); }
.jg-course-panel__lead { margin: 0 0 1.1rem; color: var(--wp--preset--color--accent-4); }
.jg-course-panel__lead strong { color: var(--wp--preset--color--contrast); }
.jg-course-panel__course { display: flex; gap: 0.9rem; align-items: center; margin: 0 0 1.1rem; }
.jg-course-panel__img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.jg-course-panel__title { margin: 0; font-weight: 600; color: var(--wp--preset--color--contrast); line-height: 1.35; }
.jg-course-panel__next { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--wp--preset--color--accent-4); }
.jg-course-panel .jg-progress { margin: 0 0 1.25rem; }
.jg-course-panel .wp-block-buttons { margin: 0; }
.jg-course-panel .wp-block-button, .jg-course-panel .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }
.jg-course-panel__more { margin: 0.9rem 0 0; font-size: 0.95rem; text-align: center; }
.wp-block-column:has(.jg-course-panel) .jg-page-header__img { display: none; }
.jg-page-header:has(.jg-course-panel) .wp-block-column:not(:has(.jg-course-panel)) .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--accent-3); box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-3);
}
.jg-page-header:has(.jg-course-panel) .wp-block-column:not(:has(.jg-course-panel)) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--wp--preset--color--accent-3); color: #fff; }
@media (prefers-reduced-motion: reduce) { .jg-course-panel { animation: none; } }
/* Course card status for a course the visitor already has (block course-status). */
.jg-card .jg-card__body .jg-card__status.is-open.is-owned { color: #1B5C64; }
/* Guest on Online courses: "See the courses" + "Sign in to your course" side by side; on a phone, one full-width
   stack so the two read as a pair. */
@media (max-width: 600px) {
	.wp-block-buttons:has(.jg-signin-button) > .wp-block-button { flex: 1 1 100%; }
	.wp-block-buttons:has(.jg-signin-button) .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }
}
/* Jane's panel on Online courses: every course as a row link (no coral: nothing to buy or continue). */
.jg-course-panel__list { margin: 0 0 0.25rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.jg-course-panel__course.is-link {
	margin: 0; padding: 0.5rem; border-radius: 12px; text-decoration: none; color: inherit;
	box-shadow: inset 0 0 0 1px #E5DED2; transition: box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.jg-course-panel__course.is-link:hover { background: #F7F3EC; box-shadow: inset 0 0 0 1px #C9C1B4; }
.jg-course-panel__course.is-link:focus-visible { outline: 3px solid var(--wp--preset--color--accent-2); outline-offset: 2px; }
.jg-course-panel__course.is-link .jg-course-panel__img { width: 48px; height: 48px; }
.jg-course-panel__go { margin-left: auto; padding-right: 0.5rem; color: var(--wp--preset--color--accent-3); font-weight: 600; }
/* Sales page closing band: everything centred under the heading. */
.jg-closing .jg-signin-hint { margin: 0.75rem 0 0; text-align: center; }
.jg-closing .jg-closing__faq { margin-top: 2rem; color: var(--wp--preset--color--accent-4); }