/*
 * Tutor LMS (course archive, single course, lesson / learning area, dashboard bits).
 * Tutor reads --tutor-* variables from :root (its own inline <style> sets them from
 * Tutor > Settings > Design). html:root outranks that, so the brand wins. Always light.
 */

html:root {
	--tutor-color-primary: #6B1F35;
	--tutor-color-primary-rgb: 107, 31, 53;
	--tutor-color-primary-hover: #561829;
	--tutor-color-primary-hover-rgb: 86, 24, 41;
	--tutor-body-color: var(--sgc-ink);
	--tutor-body-color-rgb: 30, 26, 27;
	--tutor-border-color: var(--sgc-line);
	--tutor-border-color-rgb: 221, 210, 193;
	--tutor-color-secondary: var(--sgc-ink);
	--tutor-color-subdued: var(--sgc-muted);
	--tutor-color-hints: var(--sgc-muted);
	--tutor-color-muted: var(--sgc-muted);
	--tutor-color-gray: var(--sgc-line);
	--tutor-color-gray-10: var(--sgc-surface-2);
	--tutor-color-success: var(--sgc-ok);
	--tutor-color-warning: var(--sgc-warn);
	--tutor-color-white: var(--sgc-surface);
}

/* Tutor ships its own font stack in places; use the site fonts. */
.tutor-wrap, .tutor-wrap :is(p, span, a, li, label, input, select, button),
.tutor-course-details-page, .tutor-dashboard, .tutor-modal {
	font-family: var(--sgc-font-body);
}
.tutor-wrap :is(h1, h2, h3, h4),
.tutor-course-details-title,
.tutor-course-name,
.tutor-course-details-page :is(h1, h2, h3, h4) {
	font-family: var(--sgc-font-display) !important;
	color: var(--sgc-heading);
}

/* ---------- buttons ---------- */
.tutor-btn {
	border-radius: var(--sgc-radius-btn) !important;
	font-weight: 700 !important;
	font-size: .78rem !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	box-shadow: var(--sgc-btn-shadow);
}
.tutor-btn-primary { background: var(--sgc-brand) !important; border-color: var(--sgc-brand) !important; color: var(--sgc-on-brand) !important; }
.tutor-btn-primary:hover { background: var(--sgc-brand-hover) !important; border-color: var(--sgc-brand-hover) !important; }
.tutor-btn-outline-primary,
.tutor-btn-secondary {
	background: transparent !important;
	border: 1.5px solid var(--sgc-brand) !important;
	color: var(--sgc-heading) !important;
	box-shadow: none;
}
.tutor-btn-outline-primary:hover,
.tutor-btn-secondary:hover { background: var(--sgc-accent-soft) !important; border-color: var(--sgc-brand) !important; color: var(--sgc-heading) !important; }

/* ---------- course cards (archive, [tutor_course]) ---------- */
.tutor-course-list.tutor-grid { gap: 18px; }
.tutor-card.tutor-course-card {
	background: var(--sgc-surface);
	border: 1px solid var(--sgc-line);
	border-radius: var(--sgc-radius-card);
	overflow: hidden;
	box-shadow: var(--sgc-card-shadow);
	transition: border-color .2s;
}
.tutor-card.tutor-course-card:hover,
.tutor-card.tutor-course-card:focus-within { border-color: var(--sgc-brand); }

/* No thumbnail yet: show the dot-grid tile instead of Tutor's grey placeholder. */
.tutor-course-card .tutor-course-thumbnail .tutor-ratio {
	background-color: var(--sgc-tile-bg);
	background-image: radial-gradient(var(--sgc-tile-dot) 1.2px, transparent 1.2px);
	background-size: 22px 22px;
}
.tutor-course-card .tutor-course-thumbnail img[src*="placeholder"] { opacity: 0; }

.tutor-course-card .tutor-card-body { padding: 20px; }
.tutor-course-card .tutor-course-name { font-size: 1.2rem !important; font-weight: 700 !important; line-height: 1.25; }
.tutor-course-card .tutor-course-name a { color: var(--sgc-heading); text-decoration: none; }
/* One coach, so the "By admin" author line adds nothing. */
.tutor-course-card .tutor-meta:has(.tutor-avatar) { display: none; }
.tutor-course-card .tutor-card-footer { padding: 12px 20px 20px; border-top: 1px solid var(--sgc-line); background: transparent; }
.tutor-course-card .tutor-course-bookmark .tutor-iconic-btn { background: var(--sgc-surface); color: var(--sgc-heading); border-radius: 10px; }

/* Archive toolbar. */
.tutor-course-filter select,
.tutor-courses-wrap .tutor-form-select { border-radius: var(--sgc-radius-field); border-color: var(--sgc-line); background-color: var(--sgc-surface); }

/* ---------- single course ---------- */
.tutor-course-details-page { color: var(--sgc-ink); }
.tutor-course-details-title { font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.05 !important; }
.tutor-course-details-page .tutor-card,
.tutor-course-details-page .tutor-sidebar-card {
	background: var(--sgc-surface);
	border: 1px solid var(--sgc-line);
	border-radius: var(--sgc-radius-card);
	box-shadow: var(--sgc-card-shadow);
}
/* Curriculum: modules as rounded panels, lessons as rows (prototype .module / .lesson). */
.tutor-accordion-item {
	border: 1px solid var(--sgc-line) !important;
	border-radius: 18px !important;
	overflow: hidden;
	background: var(--sgc-surface);
}
.tutor-accordion-item + .tutor-accordion-item { margin-top: 12px; }
.tutor-accordion-item-header {
	background: var(--sgc-surface-2) !important;
	color: var(--sgc-heading) !important;
	font-weight: 700 !important;
	padding: 14px 18px !important;
}
.tutor-accordion-item-body .tutor-course-content-list-item {
	padding: 13px 18px;
	border-top: 1px solid var(--sgc-line);
}
.tutor-accordion-item-body .tutor-course-content-list-item:hover { background: var(--sgc-surface-2); }
.tutor-course-content-list-item-title, .tutor-course-content-list-item-title a { color: var(--sgc-ink); }

/* Tabs. */
.tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs) .tutor-nav-link.is-active,
.tutor-nav-link.is-active { color: var(--sgc-heading) !important; border-color: var(--sgc-brand) !important; }

/* Prices in Outfit, burgundy. */
.tutor-course-details-page .price,
.tutor-course-sidebar-card-pricing,
.tutor-course-card .tutor-course-price,
.tutor-course-card .price {
	font-family: var(--sgc-font-display);
	font-weight: 800;
	color: var(--sgc-heading);
}

/* Badges ("Free preview", level). */
.tutor-badge,
.tutor-course-details-page .tutor-badge-label {
	border-radius: 999px;
	background: var(--sgc-accent-soft);
	color: var(--sgc-heading);
	font-size: .64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	border: 0;
}

/* Modals (login, enrol). */
.tutor-modal-content, .tutor-modal-content-white {
	background: var(--sgc-bg) !important;
	border-radius: var(--sgc-radius-card) !important;
	box-shadow: var(--sgc-shadow);
}

/* Forms inside Tutor. */
.tutor-form-control, .tutor-form-select {
	border-radius: var(--sgc-radius-field) !important;
	border: 1.5px solid var(--sgc-line) !important;
	background-color: var(--sgc-surface) !important;
	color: var(--sgc-ink) !important;
}
.tutor-form-label { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sgc-heading); }

/* Progress bars use the success green, like the prototype. */
.tutor-progress-bar .tutor-progress-value { background: var(--sgc-ok) !important; }

.tutor-wrap :focus-visible, .tutor-course-details-page :focus-visible { outline: 3px solid var(--sgc-brand) !important; outline-offset: 2px; }

/* ---------- single course: prototype layout cues ---------- */
.tutor-course-details-header .tutor-course-details-title {
	font-size: clamp(2.4rem, 5.4vw, 4rem) !important;
	color: var(--sgc-heading) !important;
	text-wrap: balance;
}
.tutor-course-details-info { color: var(--sgc-muted); }
.tutor-course-details-actions a, .tutor-course-details-actions button { color: var(--sgc-heading); }

/* Thumbnail placeholder becomes the dot-grid art panel. */
.tutor-course-details-page .tutor-course-thumbnail {
	aspect-ratio: 16 / 9;
	border-radius: var(--sgc-radius-card);
	overflow: hidden;
	background-color: var(--sgc-tile-bg);
	background-image: radial-gradient(var(--sgc-tile-dot) 1.2px, transparent 1.2px);
	background-size: 28px 28px;
}
.tutor-course-details-page .tutor-course-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.tutor-course-details-page .tutor-course-thumbnail img[src*="placeholder"] { opacity: 0; }

/* Buy box: cream-light card, no grey header band. */
.tutor-single-course-sidebar .tutor-sidebar-card { overflow: hidden; }
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body { background: var(--sgc-surface) !important; padding: 26px; }
.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-footer { background: var(--sgc-surface) !important; border-top: 1px solid var(--sgc-line); }
.tutor-single-course-sidebar .tutor-sidebar-card :is(.tutor-fs-4, .tutor-fs-3, .price, .woocommerce-Price-amount) {
	font-family: var(--sgc-font-display);
	font-weight: 850;
	font-size: 2.8rem;
	line-height: 1;
	color: var(--sgc-heading);
}
.tutor-single-course-sidebar .tutor-btn { width: 100%; justify-content: center; }
@media (min-width: 1200px) {
	.tutor-single-course-sidebar { position: sticky; top: 96px; }
}

/* One coach: hide the "A course by admin" instructor card. */
.tutor-single-course-sidebar-more:has(.tutor-avatar) .tutor-course-details-instructors { display: none; }
.tutor-course-details-title span { font: inherit !important; color: inherit !important; }
.tutor-course-content-list-item-title, .tutor-course-content-list-item-title a { font-weight: 500 !important; }

/* ---------- Tutor 4 design tokens (learning area, dashboard, modals) ----------
 * Tutor defines these on :root/[data-tutor-theme=light|dark|system]. Mapping them to the
 * --sgc-* tokens styles all three the same way; Tutor's theme setting is Light (wp sgc configure).
 */
html:root,
html [data-tutor-theme] {
	--tutor-brand-50: var(--sgc-accent-soft);
	--tutor-brand-100: var(--sgc-accent-soft);
	--tutor-brand-200: var(--sgc-accent-soft); /* Tutor uses 200/300 for soft fills */
	--tutor-brand-300: color-mix(in srgb, var(--sgc-brand) 35%, var(--sgc-surface));
	--tutor-brand-400: var(--sgc-brand);
	--tutor-brand-500: var(--sgc-brand-hover);
	--tutor-brand-600: var(--sgc-brand);
	--tutor-brand-700: var(--sgc-brand-hover);
	--tutor-brand-800: var(--sgc-brand-hover);
	--tutor-brand-900: var(--sgc-merlot-shade);
	--tutor-brand-950: var(--sgc-merlot-shade);

	--tutor-surface-base: var(--sgc-bg);
	--tutor-surface-l1: var(--sgc-surface);
	--tutor-surface-l1-hover: var(--sgc-surface-2);
	--tutor-surface-l2: var(--sgc-surface-2);
	--tutor-surface-l2-hover: var(--sgc-surface-3);
	--tutor-surface-l3: var(--sgc-surface-2);
	--tutor-surface-sidebar-l1: var(--sgc-surface);
	--tutor-surface-brand-primary: var(--sgc-brand);
	--tutor-surface-brand-primary-2: var(--sgc-brand-hover);
	--tutor-surface-brand-secondary: var(--sgc-accent-soft);
	--tutor-surface-brand-tertiary: var(--sgc-accent-soft);
	--tutor-surface-brand-quaternary: var(--sgc-accent-soft);
	--tutor-surface-success: var(--sgc-ok-soft);
	--tutor-surface-warning: var(--sgc-warn-soft);

	--tutor-text-primary: var(--sgc-ink);
	--tutor-text-primary-inverse: var(--sgc-on-brand);
	--tutor-text-secondary: var(--sgc-ink);
	--tutor-text-subdued: var(--sgc-muted);
	--tutor-text-brand: var(--sgc-brand);
	--tutor-text-brand-hover: var(--sgc-brand-hover);
	--tutor-text-success: var(--sgc-ok);
	--tutor-text-warning: var(--sgc-warn);

	--tutor-icon-idle: var(--sgc-heading);
	--tutor-icon-idle-inverse: var(--sgc-on-brand);
	--tutor-icon-hover: var(--sgc-brand);
	--tutor-icon-secondary: var(--sgc-muted);
	--tutor-icon-subdued: var(--sgc-muted);
	--tutor-icon-brand: var(--sgc-brand);
	--tutor-icon-brand-hover: var(--sgc-brand-hover);
	--tutor-icon-success-primary: var(--sgc-ok);

	--tutor-border-idle: var(--sgc-line);
	--tutor-border-idle2: var(--sgc-line);
	--tutor-border-hover: var(--sgc-brand);
	--tutor-border-brand: var(--sgc-brand);
	--tutor-border-brand-secondary: var(--sgc-brand);

	--tutor-button-primary: var(--sgc-brand);
	--tutor-button-primary-hover: var(--sgc-brand-hover);
	--tutor-button-primary-focused: var(--sgc-brand);
	--tutor-button-primary-disabled: color-mix(in srgb, var(--sgc-brand) 45%, var(--sgc-surface));
	--tutor-button-primary-soft: var(--sgc-accent-soft);
	--tutor-button-primary-soft-hover: color-mix(in srgb, var(--sgc-brand) 35%, var(--sgc-surface));
	--tutor-button-primary-soft-focused: var(--sgc-accent-soft);
	--tutor-button-disabled: var(--sgc-surface-2);
	--tutor-button-success: var(--sgc-ok);
	--tutor-button-success-hover: var(--sgc-ok);
	--tutor-button-secondary: var(--sgc-surface-2);
	--tutor-button-secondary-hover: var(--sgc-surface-3);
	--tutor-button-secondary-focused: var(--sgc-surface-2);
	--tutor-button-outline-hover: var(--sgc-surface-2);
	--tutor-button-ghost-hover: var(--sgc-surface-2);

	--tutor-tab-sidebar-l2: var(--sgc-surface);
	--tutor-tab-sidebar-l2-hover: var(--sgc-surface-2);
	--tutor-tab-sidebar-l2-active: var(--sgc-accent-soft);
	--tutor-tab-sidebar-l4-hover: var(--sgc-surface-2);
	--tutor-tab-sidebar-l4-active: var(--sgc-accent-soft);
	--tutor-tab-l3: var(--sgc-accent-soft);
	--tutor-tab-l3-hover: var(--sgc-surface-2);
	--tutor-tab-l3-active: var(--sgc-accent-soft);
	--tutor-tab-l3-active-hover: var(--sgc-accent-soft);

	--tutor-actions-success-primary: var(--sgc-ok);
	--tutor-actions-success-secondary: color-mix(in srgb, var(--sgc-ok) 40%, var(--sgc-surface));
	--tutor-actions-success-tertiary: var(--sgc-ok-soft);
	--tutor-actions-brand-primary: var(--sgc-brand);
	--tutor-actions-brand-secondary: color-mix(in srgb, var(--sgc-brand) 35%, var(--sgc-surface));
	--tutor-actions-brand-tertiary: var(--sgc-accent-soft);
	--tutor-actions-gray-empty: var(--sgc-surface-2);
	--tutor-actions-gray-secondary: var(--sgc-surface-2);
	--tutor-actions-gray-tertiary: var(--sgc-line);
	--tutor-actions-gray-quaternary: var(--sgc-line);
	--tutor-actions-inverse: var(--sgc-surface);
	--tutor-surface-dark: var(--sgc-heading);
}

/* Learning area: cream page, cream-light panels with rose hairlines and 24px corners. */
.tutor-learning-area { background: var(--sgc-bg) !important; color: var(--sgc-ink); }
.tutor-learning-header,
.tutor-learning-header-inner { background: var(--sgc-bg) !important; border-color: var(--sgc-line) !important; }
.tutor-learning-header-title { font-family: var(--sgc-font-display) !important; font-weight: 700 !important; color: var(--sgc-heading) !important; }
.tutor-learning-sidebar-curriculum,
.tutor-learning-area-body [class*="tutor-learning-content"] > div:first-child,
.tutor-learning-area-body .tutor-card {
	border: 1px solid var(--sgc-line);
	border-radius: var(--sgc-radius-card) !important;
	box-shadow: var(--sgc-card-shadow);
}
.tutor-learning-area :is(h1, h2, h3, h4, h5) { font-family: var(--sgc-font-display); color: var(--sgc-heading); }
.tutor-learning-progress [class*="bar"] > *,
.tutor-learning-progress progress::-webkit-progress-value { background: var(--sgc-ok) !important; }

/* ---------- Phase 4: course card (tutor/loop/course.php) ---------- */
.sgc-course-card { display: flex; }
.sgc-course-card__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.sgc-course-card__link:hover, .sgc-course-card__link:focus { color: inherit; }
.sgc-course-art {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 18px;
	background-color: var(--sgc-tile-bg);
	background-image: radial-gradient(var(--sgc-tile-dot) 1.2px, transparent 1.2px);
	background-size: 22px 22px;
	color: var(--sgc-merlot);
}
.sgc-course-art.has-image { padding: 0; }
.sgc-course-art img { width: 100%; height: 100%; object-fit: cover; }
.sgc-course-art__plate { position: absolute; right: -30px; top: -30px; width: 190px; height: 190px; opacity: .85; }
.sgc-course-art__label {
	position: relative;
	font-family: var(--sgc-font-display);
	font-weight: 900;
	font-size: 3.4rem;
	line-height: .9;
	letter-spacing: -.03em;
	color: var(--sgc-merlot); /* Course card label. */
}
.sgc-course-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sgc-course-body .tutor-course-name { margin: 0; }
.sgc-course-body p { margin: 0; }
.sgc-course-foot {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--sgc-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.sgc-course-price b { font-family: var(--sgc-font-display); font-weight: 800; color: var(--sgc-heading); }
.sgc-course-cta { font-size: .875rem; font-weight: 650; color: var(--sgc-heading); }

/* ---------- buy box (tutor/single/course/add-to-cart-woocommerce.php) ---------- */
.sgc-buybox { display: grid; gap: 14px; }
.sgc-buybox > p { margin: 0; }
.sgc-buybox__plan { border-top: 1px solid var(--sgc-line); padding-top: 14px; display: grid; gap: 6px; }
.sgc-buybox__plan p { margin: 0 0 6px; }

/* ---------- locked-lesson gate (template-parts/lesson-gate.php) ---------- */
.sgc-gate { display: grid; place-items: center; padding: 48px 16px; }
.sgc-gate__card {
	width: 100%;
	max-width: 520px;
	background: var(--sgc-bg);
	border: 1px solid var(--sgc-line);
	border-radius: var(--sgc-radius-card);
	padding: 28px;
	box-shadow: var(--sgc-shadow);
}
.sgc-gate__icon {
	width: 56px; height: 56px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--sgc-accent-soft); color: var(--sgc-brand);
	margin-bottom: 14px;
}
.sgc-gate__title { font-family: var(--sgc-font-display); font-weight: 800; font-size: 2rem; line-height: 1.05; margin: 0; color: var(--sgc-heading); }
.sgc-gate__card > p { margin: 8px 0 18px; }
.sgc-gate__actions { display: grid; gap: 10px; }
.sgc-gate__signin { text-align: center; margin: 14px 0 0 !important; }
/* No course photo yet: skip the big empty panel (the prototype's course page has none). */
.tutor-course-details-page .tutor-course-thumbnail:has(img[src*="placeholder"]) { display: none; }

/* "Mark as complete" is the lesson's main action (prototype: primary button; "Completed" after). */
.tutor-learning-area .tutor-mark-as-complete-button {
	background: var(--sgc-brand) !important;
	color: var(--sgc-on-brand) !important;
	border: 0 !important;
	border-radius: var(--sgc-radius-btn) !important;
	font-weight: 700 !important;
	font-size: .78rem !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 13px 22px !important;
}
.tutor-learning-area .tutor-mark-as-complete-button:hover { background: var(--sgc-brand-hover) !important; }
/* Kadence's global button style would paint Tutor's plain icon/nav buttons burgundy. */
.tutor-learning-area button.tutor-btn-ghost,
.tutor-learning-area button.tutor-learning-nav-item,
.tutor-learning-area .tutor-learning-header button { background: transparent; color: inherit; box-shadow: none; }
.tutor-learning-area .tutor-mark-as-complete-button * { color: inherit !important; }
.tutor-learning-area button.tutor-btn-icon:not(.tutor-mark-as-complete-button) { background: transparent !important; color: var(--sgc-heading) !important; box-shadow: none !important; }

/* ---------- free preview banner + gate dialog ---------- */
.sgc-preview-banner {
	display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
	padding: 18px 22px; margin-bottom: 18px;
	border-radius: 18px; background: var(--sgc-surface-2); color: var(--sgc-ink);
}
.sgc-gate-dialog { border: 0; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 32px); }
.sgc-gate-dialog::backdrop { background: var(--sgc-backdrop); backdrop-filter: blur(4px); }
.sgc-gate.is-dialog { padding: 0; }
.sgc-gate__card { position: relative; }
.sgc-gate__close {
	position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--sgc-line) !important; background: var(--sgc-surface) !important; color: var(--sgc-heading) !important;
	font-size: 1.2rem; line-height: 1; padding: 0 !important; box-shadow: none !important;
}

/* Online academy: intro and member banner (inc/plugin-tweaks.php). */
.sgc-academy-intro { margin: -8px 0 22px; max-width: 70ch; }
.sgc-gate-banner {
	display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
	padding: 18px 22px; border-radius: 18px; background: var(--sgc-surface-2); margin: 0 0 28px;
}
.sgc-gate-banner p { margin: 4px 0 0; max-width: 70ch; }

/* Course page curriculum and text colours: Tutor hard-codes white rows and fixed greys, which
   ignores the palette. Use the theme tokens. */
.tutor-course-content-list-item { background: var(--sgc-surface) !important; border-color: var(--sgc-line) !important; }
.tutor-course-content-list-item:hover { background: var(--sgc-surface-2) !important; }
.tutor-course-content-list-item .tutor-course-content-list-item-title,
.tutor-course-content-list-item .tutor-course-content-list-item-title a { color: var(--sgc-ink) !important; }
.tutor-course-content-list-item .tutor-course-content-list-item-icon,
.tutor-course-content-list-item .tutor-course-content-list-item-duration,
.tutor-course-content-list-item .tutor-course-content-list-item-status { color: var(--sgc-muted) !important; }
.tutor-color-secondary, .tutor-color-muted, .tutor-course-details-content, .tutor-course-details-content p { color: var(--sgc-muted) !important; }
.tutor-course-content-list-item-title a { text-decoration: none; }
.tutor-course-content-list-item-title a:hover { text-decoration: underline; }
.sgc-preview-tag { margin-left: 8px; font-size: .62rem; vertical-align: 2px; }

/* Video player background: ink. */
.tutor-video-player, .tutor-video-player .tutor-ratio, .tutor-video-player .plyr, .tutor-video-player iframe { background: var(--sgc-player-bg); }
.tutor-accordion-item-body-content { border-color: var(--sgc-line) !important; }

/* ---------- course page: breadcrumb, tags, module counts (prototype) ---------- */
.sgc-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--sgc-muted); margin-bottom: 4px; }
.sgc-breadcrumb a { color: var(--sgc-muted); text-decoration: underline; text-underline-offset: 3px; }
.sgc-breadcrumb a:hover { color: var(--sgc-heading); }
.sgc-course-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.sgc-course-tags li { margin: 0; }
.tutor-accordion-item-header { display: flex; align-items: center; gap: 12px; padding-right: 48px !important; }
.sgc-topic-title { flex: 1; }
.sgc-topic-count { font-family: var(--sgc-font-body); font-size: .78rem; font-weight: 500; color: var(--sgc-muted); white-space: nowrap; }
.tutor-course-content-list-item.is-locked .tutor-course-content-list-item-icon { color: var(--sgc-muted); }
.tutor-course-content-list-item:not(.is-locked) .tutor-course-content-list-item-icon { color: var(--sgc-brand); }

/* Academy intro: 12px under the title, 60 characters wide (prototype). */
.course-archive-page .sgc-academy-intro { margin-top: 12px; max-width: 60ch; }