/**
 * Sprigly Portal Theme: Studio
 *
 * Layered on top of portal.css when body.sp-theme-studio is present.
 *
 * Studio is a significant visual departure from Classic. It expects
 * the following Studio-only markup, emitted by Sprigly_Portal when
 * the active theme is studio:
 *
 *   .sp-header-studio          two-row header (logo+meta, then tabs)
 *   .sp-client-meta            top-right of header inner
 *   .sp-tab-nav .sp-tab        tabbed nav row (3 main + utilities)
 *   .sp-section-eyebrow        small-caps heading above card lists
 *   .sp-studio-card            two-column dashboard journey card
 *   .sp-studio-card-body       left column (title/desc/meta)
 *   .sp-studio-card-side       right column (progress ring + button)
 *   .sp-progress-ring          SVG progress ring on dashboard cards
 *   .sp-studio-milestone-hero  hero card on milestone detail page
 *   .sp-studio-hero-pills      status + count pills inside hero
 *
 * Classic markup remains byte-identical to the pre-1.7 portal.
 *
 * Brand colour drives every accent via the four CSS variables
 * injected from PHP: --sp-primary, --sp-primary-dark, --sp-primary-
 * darker, --sp-brand-tint, --sp-brand-tint-strong.
 *
 * @package Sprigly
 * @since   1.7.0
 */

/* ============================================================
   Variable defaults (in case brand colour is stock #314562 and
   Lite's inline override therefore doesn't emit). Must live on
   `:root` (specificity 0,0,1) so Lite's brand-derived inline
   override on `body.sprigly-portal` (0,2,0) wins whenever a
   custom brand colour is set. Earlier this lived on
   `body.sp-theme-studio` (0,2,0), which tied Lite's inline at
   `:root` (0,0,1) and silently won by specificity, leaving the
   brand-tint pill and other accents blue-grey regardless of the
   practitioner's brand colour.
   ============================================================ */
:root {
	--sp-primary-darker:    #182233;
	--sp-brand-tint:        #eef0f2;
	--sp-brand-tint-strong: #d5d9df;
}

/* ============================================================
   Page surface
   ============================================================ */
body.sprigly-portal.sp-theme-studio {
	background: #f4f4f1 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell {
	background: transparent !important;
}

/* ============================================================
   Studio header — two rows (logo+meta, then tab nav)
   ============================================================ */
body.sp-theme-studio .sp-header-studio {
	/* Both ends of the gradient stay closer to the brand colour: the
	   bright end IS the brand colour and the dark end is only 15%
	   darker (was 35% in earlier iterations). Keeps the header feeling
	   vibrant rather than muddy regardless of which brand colour the
	   practitioner picked. */
	background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%) !important;
	border-bottom: none !important;
	padding: 0 !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

body.sp-theme-studio .sp-header-studio::after {
	content: '' !important;
	position: absolute !important;
	right: -80px !important;
	top: -60px !important;
	width: 360px !important;
	height: 360px !important;
	background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

body.sp-theme-studio .sp-header-studio .sp-header-inner {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 28px 32px 0 !important;
	height: auto !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 24px !important;
	position: relative !important;
	z-index: 1 !important;
}

body.sp-theme-studio .sp-logo {
	flex-shrink: 0 !important;
}

body.sp-theme-studio .sp-logo a {
	color: #fff !important;
	font-size: 1.25em !important;
}

body.sp-theme-studio .sp-logo img {
	max-height: 64px !important;
	max-width: 320px !important;
}

/* Client meta — top-right of header inner row */
body.sp-theme-studio .sp-client-meta {
	text-align: right !important;
	padding-top: 4px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-client-meta-eyebrow {
	/* (0,4,0) specificity needed to beat portal.css's typography reset
	   on `body.sprigly-portal .sp-portal-shell div` at (0,2,1). */
	font-size: 14px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.6px !important;
	color: rgba(255,255,255,0.55) !important;
	margin-bottom: 6px !important;
	font-weight: 600 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-client-meta-name {
	/* Same (0,4,0) specificity bump. */
	font-size: 21px !important;
	color: #fff !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.2px !important;
}

/* ============================================================
   Tab navigation row (under the header inner)
   ============================================================ */
body.sp-theme-studio .sp-tab-nav {
	max-width: 1200px !important;
	margin: 28px auto 0 !important;
	padding: 0 32px !important;
	display: flex !important;
	align-items: stretch !important;
	gap: 4px !important;
	position: relative !important;
	z-index: 1 !important;
}

body.sp-theme-studio .sp-tab-nav .sp-tab,
body.sp-theme-studio .sp-tab-nav .sp-tab-utility {
	padding: 14px 22px !important;
	color: rgba(255,255,255,0.72) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	border-radius: 10px 10px 0 0 !important;
	transition: all 0.15s !important;
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-tab-nav .sp-tab,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-tab-nav .sp-tab-utility {
	font-size: 15px !important;
}

body.sp-theme-studio .sp-tab-nav .sp-tab:hover,
body.sp-theme-studio .sp-tab-nav .sp-tab-utility:hover {
	color: #fff !important;
	background: rgba(255,255,255,0.06) !important;
}

body.sp-theme-studio .sp-tab-nav .sp-tab-active {
	background: #f4f4f1 !important;
	color: #1a1f1c !important;
	font-weight: 600 !important;
}

body.sp-theme-studio .sp-tab-nav .sp-tab-active:hover {
	background: #f4f4f1 !important;
	color: #1a1f1c !important;
}

body.sp-theme-studio .sp-tab-spacer {
	flex: 1 !important;
}

body.sp-theme-studio .sp-tab-nav .sp-tab-utility {
	color: rgba(255,255,255,0.55) !important;
}

body.sp-theme-studio .sp-tab-nav .sp-logout {
	color: rgba(255,255,255,0.5) !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-tab-nav .sp-logout {
	font-size: 15px !important;
}

/* ============================================================
   Content area — same max-width as the header inner row so the
   journey card and stat strip sit flush under the tabs and the
   client-meta block.
   ============================================================ */
body.sp-theme-studio .sp-content {
	max-width: 1200px !important;
	padding: 36px 32px 80px !important;
}

/* ============================================================
   Dashboard heading + welcome message + section eyebrow
   ============================================================ */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-dashboard h1 {
	font-size: 1.6em !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	margin: 0 0 8px !important;
	color: #1a1f1c !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-welcome-message {
	font-size: 18px !important;
	color: #2D2E2D !important;
	margin: 0 0 36px !important;
	line-height: 1.55 !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

/* Selector bumped to (0,4,0) so it beats portal.css's typography
   reset at `body.sprigly-portal .sp-portal-shell div` (0,2,1).
   At equal `!important`, higher specificity wins regardless of
   source order. Same discipline as the other Studio rules that
   touch p/span/div descendants — see feedback_portal_css_specificity. */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-section-eyebrow {
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	color: #2D2E2D !important;
	margin: 15px 0 16px !important;
}

body.sp-theme-studio .sp-journey-cards + .sp-section-eyebrow {
	margin-top: 48px !important;
}

body.sp-theme-studio .sp-section-title {
	display: none !important;
}

/* ============================================================
   Studio journey card — two-column with progress ring
   ============================================================ */
body.sp-theme-studio .sp-journey-cards {
	gap: 20px !important;
}

body.sp-theme-studio .sp-journey-card.sp-studio-card {
	display: grid !important;
	grid-template-columns: 1fr 340px !important;
	gap: 28px !important;
	align-items: center !important;
	padding: 28px !important;
	border-radius: 16px !important;
	border: 1px solid transparent !important;
	background: #fff !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05) !important;
	transition: box-shadow 0.2s, transform 0.2s !important;
}

body.sp-theme-studio .sp-journey-card.sp-studio-card:hover {
	box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 12px 32px rgba(0,0,0,0.08) !important;
	transform: translateY(-2px) !important;
}

body.sp-theme-studio .sp-studio-card-body {
	min-width: 0 !important;
	display: block !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-card-body h3 {
	font-size: 1.8em !important;
	font-weight: 700 !important;
	letter-spacing: -0.4px !important;
	margin: 0 0 12px !important;
	color: #1a1f1c !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-card-body .sp-card-desc {
	font-size: 17px !important;
	color: #2D2E2D !important;
	line-height: 1.55 !important;
	margin: 0 0 18px !important;
}

body.sp-theme-studio .sp-studio-meta-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 22px !important;
	color: #2D2E2D !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-meta-row span {
	font-size: 17px !important;
	color: #2D2E2D !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-meta-row strong {
	color: #1a1f1c !important;
	font-weight: 600 !important;
}

/* Right column — ring + label + button */
body.sp-theme-studio .sp-studio-card-side {
	background: #f9f8f4 !important;
	border-radius: 14px !important;
	padding: 24px 22px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
}

body.sp-theme-studio .sp-progress-ring {
	position: relative !important;
	width: 138px !important;
	height: 138px !important;
	margin: 2px auto 8px !important;
}

body.sp-theme-studio .sp-progress-ring svg {
	width: 100% !important;
	height: 100% !important;
	transform: rotate(-90deg) !important;
	display: block !important;
}

body.sp-theme-studio .sp-progress-ring .sp-ring-bg {
	fill: none !important;
	stroke: #e6e4dd !important;
	stroke-width: 8 !important;
}

body.sp-theme-studio .sp-progress-ring .sp-ring-fill {
	fill: none !important;
	stroke: var(--sp-primary) !important;
	stroke-width: 8 !important;
	stroke-linecap: round !important;
	transition: stroke-dashoffset 0.4s ease !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-ring-pct {
	position: absolute !important;
	inset: 0 !important;
	display: grid !important;
	place-items: center !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	color: var(--sp-primary-darker) !important;
	letter-spacing: -0.5px !important;
}

body.sp-theme-studio .sp-ring-label {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.3px !important;
	color: #2D2E2D !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
}

body.sp-theme-studio .sp-studio-card-side .sp-card-continue {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 12px 18px !important;
	background: var(--sp-primary-dark) !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background 0.15s !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-card-side .sp-card-continue {
	font-size: 14px !important;
}

body.sp-theme-studio .sp-studio-card-side .sp-card-continue:hover {
	background: var(--sp-primary-darker) !important;
	color: #fff !important;
}

/* ============================================================
   Journey detail page (Studio) — milestone tracker styling so
   `/portal/journey/{id}/` reads as Studio, not a Classic page
   stuck under a Studio header.
   ============================================================ */
body.sp-theme-studio .sp-journey {
	/* Full-width: sit flush under the header inner row + tab nav,
	   matching the dashboard's 1200px container so the journey
	   detail doesn't look narrower than Home. */
	max-width: 1200px !important;
	margin: 0 auto !important;
}

body.sp-theme-studio .sp-journey-header {
	margin-bottom: 28px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-journey-header h1 {
	font-size: 1.6em !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px !important;
	margin: 0 0 10px !important;
	color: #1a1f1c !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-journey-header p {
	font-size: 17px !important;
	color: #2D2E2D !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

/* Overall progress block — promote into a card */
body.sp-theme-studio .sp-overall-progress {
	background: #fff !important;
	border-radius: 14px !important;
	padding: 22px 26px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important;
	margin-bottom: 32px !important;
}

body.sp-theme-studio .sp-progress-stats {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	margin-bottom: 12px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-progress-fraction {
	font-size: 15px !important;
	color: #2D2E2D !important;
	font-weight: 500 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-progress-pct {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--sp-primary-darker) !important;
	letter-spacing: -0.3px !important;
}

body.sp-theme-studio .sp-progress-bar-large {
	height: 12px !important;
	background: #ebe9e1 !important;
	border-radius: 999px !important;
}

body.sp-theme-studio .sp-progress-bar-large .sp-progress-fill {
	background: linear-gradient(90deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%) !important;
	border-radius: 999px !important;
}

/* Milestone tracker — wrap in a single card with breathing room
   between steps, treat each as a sub-card with hover lift */
body.sp-theme-studio .sp-milestone-tracker {
	background: transparent !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	padding-left: 0 !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step {
	background: #fff !important;
	border-radius: 14px !important;
	padding: 22px 24px !important;
	margin-bottom: 14px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.04) !important;
	display: grid !important;
	grid-template-columns: 48px 1fr auto !important;
	gap: 18px !important;
	align-items: center !important;
	border: 1px solid transparent !important;
	transition: box-shadow 0.2s, transform 0.2s !important;
	position: relative !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step:hover {
	box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 10px 28px rgba(0,0,0,0.06) !important;
	transform: translateY(-1px) !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step.sp-step-current {
	border-color: var(--sp-primary) !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step.sp-step-locked {
	background: #fbfaf6 !important;
	box-shadow: none !important;
	border: 1px dashed #e6e4dd !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step.sp-step-locked:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Hide the connector line — cards have their own spacing */
body.sp-theme-studio .sp-milestone-tracker .sp-connector {
	display: none !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step-circle {
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
	display: grid !important;
	place-items: center !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	flex-shrink: 0 !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step-done .sp-step-circle {
	background: var(--sp-primary) !important;
	color: #fff !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step-current .sp-step-circle {
	background: #fff !important;
	color: var(--sp-primary) !important;
	border: 2px solid var(--sp-primary) !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step-pending .sp-step-circle {
	background: #f3f1ea !important;
	color: #2D2E2D !important;
	border: 1px solid #e6e4dd !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step-content {
	min-width: 0 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-tracker .sp-step-title {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #1a1f1c !important;
	letter-spacing: -0.2px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-tracker .sp-step-desc {
	font-size: 17px !important;
	color: #2D2E2D !important;
	line-height: 1.55 !important;
	margin-top: 6px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-tracker .sp-step-date {
	font-size: 13px !important;
	color: #2D2E2D !important;
	margin-top: 6px !important;
}

/* Continue arrow on the right of each step */
body.sp-theme-studio .sp-milestone-tracker .sp-step a.sp-step-link::after,
body.sp-theme-studio .sp-milestone-tracker .sp-step > a:last-child::after {
	content: '\2192' !important;
	color: #c5c9c2 !important;
	font-size: 20px !important;
	margin-left: 8px !important;
}

body.sp-theme-studio .sp-milestone-tracker .sp-step-done a::after {
	color: var(--sp-primary) !important;
}

/* Celebration card */
body.sp-theme-studio .sp-celebration {
	background: linear-gradient(135deg, var(--sp-brand-tint) 0%, var(--sp-brand-tint-strong) 100%) !important;
	border: 1px solid var(--sp-brand-tint-strong) !important;
	border-radius: 16px !important;
	padding: 32px 28px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05) !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-celebration h2 {
	color: var(--sp-primary-darker) !important;
	font-size: 1.8em !important;
	font-weight: 700 !important;
	letter-spacing: -0.4px !important;
}

/* ============================================================
   Milestone hero card (Studio)
   ============================================================ */
body.sp-theme-studio .sp-back-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 14px !important;
	margin-bottom: 18px !important;
	background: rgba(0,0,0,0.05) !important;
	color: #1a1f1c !important;
	border-radius: 8px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: background 0.15s !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-back-link {
	font-size: 13px !important;
	color: #1a1f1c !important;
}

body.sp-theme-studio .sp-back-link:hover {
	background: rgba(0,0,0,0.08) !important;
}

body.sp-theme-studio .sp-studio-milestone-hero {
	background: #fff !important;
	border-radius: 14px !important;
	padding: 28px !important;
	margin-bottom: 24px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important;
}

body.sp-theme-studio .sp-studio-hero-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-bottom: 14px !important;
}

body.sp-theme-studio .sp-studio-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-pill {
	font-size: 11px !important;
}

body.sp-theme-studio .sp-pill-in-progress {
	background: #fdf3e2 !important;
	color: #9a5a1f !important;
}

body.sp-theme-studio .sp-pill-completed {
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary-darker) !important;
}

body.sp-theme-studio .sp-studio-pill .sp-pill-dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 999px !important;
	display: inline-block !important;
}

body.sp-theme-studio .sp-pill-in-progress .sp-pill-dot {
	background: #c8651a !important;
}

body.sp-theme-studio .sp-pill-completed .sp-pill-dot {
	background: var(--sp-primary) !important;
}

body.sp-theme-studio .sp-pill-count {
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary-darker) !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-milestone-hero h1 {
	font-size: 1.9em !important;
	font-weight: 700 !important;
	letter-spacing: -0.4px !important;
	margin: 0 0 6px !important;
	color: #1a1f1c !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-hero-sub {
	font-size: 14px !important;
	color: #2D2E2D !important;
	margin: 0 !important;
}

/* Hide the legacy Classic milestone header and completed banner
   when Studio is rendering its hero card (the conditional PHP
   should mean these aren't even emitted, but be defensive). */
body.sp-theme-studio .sp-milestone-header,
body.sp-theme-studio .sp-completed-banner {
	display: none !important;
}

/* ============================================================
   Numbered section badges (Studio)
   Auto-incremented via CSS counters; one counter per milestone
   page, scoped to .sp-milestone-detail.
   ============================================================ */
body.sp-theme-studio .sp-milestone-detail {
	counter-reset: sp-section !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-section-heading {
	counter-increment: sp-section !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 12px !important;
	letter-spacing: 1.4px !important;
	color: #2D2E2D !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-section-heading::before {
	content: counter(sp-section) !important;
	flex-shrink: 0 !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 999px !important;
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary-darker) !important;
	display: grid !important;
	place-items: center !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
}

/* Wrap each section content in a white card */
body.sp-theme-studio .sp-milestone-detail .sp-section {
	background: #fff !important;
	border-radius: 14px !important;
	padding: 24px 28px !important;
	margin-bottom: 18px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04) !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-section .sp-section-heading {
	margin-bottom: 18px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid #ebe9e1 !important;
}

/* Body copy size inside the milestone detail sections. portal.css's
   typography reset resets p/li/div to 15px individually, so we
   target the descendants directly with (0,4,0+) specificity. The
   .sp-milestone-body override (18px) lives further down the cascade
   and wins for the Guidance body since it's nested deeper. */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-detail .sp-section,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-detail .sp-section p,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-detail .sp-section li {
	font-size: 17px !important;
	line-height: 1.6 !important;
}

/* But the reflection editor + saved content inside the My
   Reflection section need 18px (matching milestone body copy)
   so typing and rendered reflections read at the same size. The
   below selector is more specific (extra `.sp-editor` /
   `.sp-reflection-content` class) so it overrides the 17px
   section default. */

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-body,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-body p,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-body li,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-body div {
	font-size: 18px !important;
	line-height: 1.65 !important;
}

/* Reflection editor (contenteditable) + saved reflection display.
   The contenteditable holds raw text in its root `<div>` until the
   user presses Enter, when the browser wraps content in `<p>` or
   `<div>`. spNormalizeHtml() normalises divs to ps on save, but
   during typing both element types need the same 18px size or the
   text visually jumps between sizes. Saved reflection content
   matches so the typing -> saved transition is invisible. */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-editor,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-editor p,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-editor div,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-editor li,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-reflection-content,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-reflection-content p,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-reflection-content div,
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-reflection-content li {
	font-size: 17px !important;
	line-height: 1.65 !important;
}

/* Generic section headings outside milestone detail (e.g. on
   journey page) still get the small-caps treatment but without
   numbered badge. */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-section-heading {
	font-size: 12px !important;
	letter-spacing: 1.4px !important;
	color: #2D2E2D !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

/* ============================================================
   Footer
   ============================================================ */
body.sp-theme-studio .sp-footer {
	color: var(--sp-gray-500) !important;
	padding: 32px 20px 48px !important;
}

/* ============================================================
   Buttons
   ============================================================ */
body.sp-theme-studio .sp-btn {
	border-radius: 10px !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
}

body.sp-theme-studio .sp-btn-primary {
	background: var(--sp-primary-dark) !important;
}

body.sp-theme-studio .sp-btn-primary:hover {
	background: var(--sp-primary-darker) !important;
}

/* ============================================================
   Stat strip (Studio dashboard, below journey cards)
   ============================================================ */
body.sp-theme-studio .sp-studio-stat-strip {
	display: grid !important;
	gap: 16px !important;
	margin: 36px 0 0 !important;
}

body.sp-theme-studio .sp-studio-stat-strip-4col { grid-template-columns: repeat(4, 1fr) !important; }
body.sp-theme-studio .sp-studio-stat-strip-3col { grid-template-columns: repeat(3, 1fr) !important; }
body.sp-theme-studio .sp-studio-stat-strip-2col { grid-template-columns: repeat(2, 1fr) !important; }
body.sp-theme-studio .sp-studio-stat-strip-1col { grid-template-columns: 1fr !important; }

body.sp-theme-studio .sp-studio-stat {
	background: #fff !important;
	border-radius: 12px !important;
	padding: 20px 22px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.04) !important;
	min-width: 0 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-stat-label {
	/* Higher specificity (0,4,0) so it beats portal.css's typography
	   reset on `body.sprigly-portal .sp-portal-shell div` (0,2,1). */
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.4px !important;
	color: #2D2E2D !important;
	font-weight: 600 !important;
	margin-bottom: 10px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-stat-value {
	font-size: 30px !important;
	font-weight: 700 !important;
	letter-spacing: -0.6px !important;
	color: #1a1f1c !important;
	line-height: 1 !important;
	margin-bottom: 6px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-stat-sub {
	/* Higher specificity (0,4,0) so it beats portal.css's typography
	   reset on `body.sprigly-portal .sp-portal-shell div` (0,2,1). */
	font-size: 17px !important;
	color: #2D2E2D !important;
}

/* Recent Activity eyebrow gets more top margin */
body.sp-theme-studio .sp-studio-activity-eyebrow {
	margin-top: 40px !important;
}

/* Recent Activity grid — 1 col with just Latest Milestones (Lite),
   or 2 cols with Latest Milestones + From Your Practitioner (Pro
   injects the second column via the
   `sprigly_portal_dashboard_practitioner_activity` filter). */
body.sp-theme-studio .sp-studio-activity-grid {
	display: grid !important;
	gap: 16px !important;
}

body.sp-theme-studio .sp-studio-activity-grid-1col {
	grid-template-columns: 1fr !important;
}

body.sp-theme-studio .sp-studio-activity-grid-2col {
	grid-template-columns: 1.3fr 1fr !important;
}

body.sp-theme-studio .sp-studio-activity-panel {
	background: #fff !important;
	border-radius: 12px !important;
	padding: 22px 24px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.04) !important;
}

/* Practitioner activity panel — Pro renders inside. Plain white
   so it matches the Latest Milestones panel; the panel reads as
   practitioner-driven via the panel heading + content, not via
   a background tint. */
body.sp-theme-studio .sp-studio-activity-panel-practitioner {
	background: #fff !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-activity-panel-practitioner .sp-studio-activity-item-pill {
	background: #fdf3e2 !important;
	color: #9a5a1f !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-activity-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 0 6px !important;
	color: #1a1f1c !important;
}

body.sp-theme-studio .sp-studio-activity-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	padding: 12px 0 !important;
	border-top: 1px solid #ebe9e1 !important;
	text-decoration: none !important;
	color: #1a1f1c !important;
	transition: color 0.15s !important;
}

body.sp-theme-studio .sp-studio-activity-item:first-of-type {
	border-top: none !important;
}

body.sp-theme-studio .sp-studio-activity-item:hover {
	color: var(--sp-primary-dark) !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-activity-item-title {
	font-size: 16px !important;
	font-weight: 500 !important;
}

/* Completed pill on Latest Milestones panel. Selector bumped to
   (0,6,1) by chaining `.sp-studio-activity-panel .sp-studio-
   activity-item` so it wins over any later rule that touches
   `span` or `a` color inside the panel. Uses --sp-brand-tint-
   strong + --sp-primary (full-saturation brand, not the darker
   variant) so the text reads as brand-coloured against the pale
   tint at small sizes. */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-activity-panel .sp-studio-activity-item .sp-studio-activity-item-pill {
	display: inline-block !important;
	padding: 4px 12px !important;
	background: var(--sp-brand-tint-strong) !important;
	color: var(--sp-primary) !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	flex-shrink: 0 !important;
}

/* ============================================================
   Global Reflections page (Studio + Classic share these styles)
   Studio-only because Classic doesn't use the tab nav that takes
   you here.
   ============================================================ */
body.sp-theme-studio .sp-reflections-global h1 {
	font-size: 1.6em !important;
	font-weight: 700 !important;
	letter-spacing: -0.4px !important;
	margin: 0 0 8px !important;
	color: #1a1f1c !important;
}

body.sp-theme-studio .sp-reflections-global .sp-welcome-message {
	margin-bottom: 28px !important;
}

body.sp-theme-studio .sp-reflections-global-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

body.sp-theme-studio .sp-reflection-global-entry {
	background: #fff !important;
	border-radius: 14px !important;
	padding: 24px 26px !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 14px rgba(0,0,0,0.04) !important;
	position: relative !important;
	overflow: hidden !important;
	transition: box-shadow 0.2s, transform 0.2s !important;
}

body.sp-theme-studio .sp-reflection-global-entry::before {
	/* Left accent bar in brand tint, gives each entry visual weight
	   and breaks up the otherwise-uniform card stack. */
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	width: 4px !important;
	background: var(--sp-brand-tint-strong) !important;
}

body.sp-theme-studio .sp-reflection-global-entry.sp-reflection-latest::before {
	background: var(--sp-primary) !important;
}

body.sp-theme-studio .sp-reflection-global-entry:hover {
	box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06) !important;
}

body.sp-theme-studio .sp-reflection-head {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px 14px !important;
	margin-bottom: 10px !important;
}

body.sp-theme-studio .sp-reflection-journey-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 12px 4px 10px !important;
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary-darker) !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

body.sp-theme-studio .sp-reflection-journey-chip a {
	color: inherit !important;
	text-decoration: none !important;
}

body.sp-theme-studio .sp-reflection-journey-chip a:hover {
	text-decoration: underline !important;
}

body.sp-theme-studio .sp-reflection-icon {
	flex-shrink: 0 !important;
	opacity: 0.85 !important;
}

body.sp-theme-studio .sp-reflection-latest-pill {
	display: inline-block !important;
	padding: 3px 10px !important;
	background: #fdf3e2 !important;
	color: #9a5a1f !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.7px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-reflection-global-entry .sp-reflection-date {
	color: #2D2E2D !important;
	font-size: 12px !important;
	margin-left: auto !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-reflection-milestone-title {
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: -0.2px !important;
	margin: 0 0 10px !important;
	line-height: 1.3 !important;
	color: #1a1f1c !important;
}

body.sp-theme-studio .sp-reflection-milestone-title a {
	color: inherit !important;
	text-decoration: none !important;
}

body.sp-theme-studio .sp-reflection-milestone-title a:hover {
	color: var(--sp-primary-darker) !important;
}

body.sp-theme-studio .sp-reflection-global-entry .sp-reflection-content {
	color: #2D2E2D !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

body.sp-theme-studio .sp-reflection-actions {
	margin-top: 14px !important;
	padding-top: 12px !important;
	border-top: 1px solid #ebe9e1 !important;
}

body.sp-theme-studio .sp-reflection-jump {
	color: var(--sp-primary-dark) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body.sp-theme-studio .sp-reflection-jump:hover {
	color: var(--sp-primary-darker) !important;
}

/* ============================================================
   Milestone hero — 2-column grid with right-side journey %
   indicator (mockup parity). Keeps single-column on mobile.
   ============================================================ */
body.sp-theme-studio .sp-studio-milestone-hero {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	gap: 24px !important;
	align-items: center !important;
}

body.sp-theme-studio .sp-studio-hero-body {
	min-width: 0 !important;
}

body.sp-theme-studio .sp-studio-hero-side {
	text-align: center !important;
	border-left: 1px solid #e6e4dd !important;
	padding-left: 28px !important;
	flex-shrink: 0 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-hero-pct-num {
	font-size: 36px !important;
	font-weight: 700 !important;
	color: var(--sp-primary-darker) !important;
	line-height: 1 !important;
	letter-spacing: -0.5px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-hero-pct-lbl {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.3px !important;
	color: #2D2E2D !important;
	margin-top: 8px !important;
	font-weight: 600 !important;
}

/* ============================================================
   Resource tile — pale-green icon square + hover tint
   ============================================================ */
body.sp-theme-studio .sp-milestone-detail .sp-resource-item {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 12px 14px !important;
	background: #fff !important;
	border: 1px solid #e6e4dd !important;
	border-radius: 10px !important;
	margin-bottom: 8px !important;
	text-decoration: none !important;
	color: #1a1f1c !important;
	transition: background 0.15s, border-color 0.15s !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-resource-item:last-child {
	margin-bottom: 0 !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-resource-item:hover {
	background: var(--sp-brand-tint) !important;
	border-color: var(--sp-brand-tint-strong) !important;
	color: var(--sp-primary-darker) !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-detail .sp-resource-item span {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-resource-icon {
	width: 40px !important;
	height: 40px !important;
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary-darker) !important;
	border-radius: 8px !important;
	display: grid !important;
	place-items: center !important;
	flex-shrink: 0 !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

/* ============================================================
   Check-in card (Pro renders the form; Studio restyles inputs)
   ============================================================ */
body.sp-theme-studio .sp-milestone-detail .sp-checkin-card {
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-checkin-field {
	margin-bottom: 22px !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-checkin-field:last-of-type {
	margin-bottom: 4px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-milestone-detail .sp-checkin-field label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1a1f1c !important;
	margin-bottom: 10px !important;
	display: block !important;
}

/* Force inputs full-width; Pro's inline max-widths are constraints
   for Classic, but Studio uses the wider section card so a full-
   width field reads cleaner. */
body.sp-theme-studio .sp-milestone-detail .sp-checkin-input,
body.sp-theme-studio .sp-milestone-detail .sp-checkin-select,
body.sp-theme-studio .sp-milestone-detail textarea.sp-checkin-input {
	width: 100% !important;
	max-width: none !important;
	padding: 11px 14px !important;
	border: 1px solid #e6e4dd !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #1a1f1c !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	box-shadow: none !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-checkin-input:focus,
body.sp-theme-studio .sp-milestone-detail .sp-checkin-select:focus,
body.sp-theme-studio .sp-milestone-detail textarea.sp-checkin-input:focus {
	outline: none !important;
	border-color: var(--sp-primary) !important;
	box-shadow: 0 0 0 3px var(--sp-brand-tint) !important;
}

body.sp-theme-studio .sp-milestone-detail input[type="number"].sp-checkin-input,
body.sp-theme-studio .sp-milestone-detail input[type="date"].sp-checkin-input {
	max-width: 220px !important;
}

/* Rating buttons (1-N scale) — Studio renders them as a full-
   width row with thinner borders and softer default state. */
body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-rating-group {
	display: flex !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

body.sp-theme-studio .sp-rating-group label {
	flex: 1 1 0 !important;
	min-width: 44px !important;
	cursor: pointer !important;
	margin: 0 !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-rating-group .sp-rating-btn {
	width: 100% !important;
	height: 44px !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: #e6e4dd !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: #2D2E2D !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	box-shadow: none !important;
	transition: border-color 0.15s, background 0.15s, color 0.15s !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-rating-group label:hover .sp-rating-btn {
	border-color: var(--sp-primary) !important;
	color: var(--sp-primary-darker) !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-rating-group input:checked + .sp-rating-btn {
	background: var(--sp-primary-darker) !important;
	border-color: var(--sp-primary-darker) !important;
	color: #fff !important;
}

/* ============================================================
   Conversation feed — restructure entries as avatar + body
   rows, separated by hairline rules. Drops the alternating
   140px margin offsets used by Classic.
   ============================================================ */
body.sp-theme-studio .sp-milestone-detail .sp-reflection-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	margin-top: 8px !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-reflection-entry.sp-msg {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border: none !important;
	border-top: 1px solid #f0eee7 !important;
	padding: 18px 0 !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: 40px 1fr !important;
	gap: 14px !important;
}

body.sp-theme-studio .sp-milestone-detail .sp-reflection-list .sp-reflection-entry.sp-msg:first-child {
	border-top: none !important;
	padding-top: 4px !important;
}

body.sp-theme-studio .sp-msg-avatar {
	width: 40px !important;
	height: 40px !important;
	border-radius: 999px !important;
	display: grid !important;
	place-items: center !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	flex-shrink: 0 !important;
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary-darker) !important;
	letter-spacing: 0.3px !important;
}

body.sp-theme-studio .sp-msg-avatar-practitioner {
	background: var(--sp-primary-dark) !important;
	color: #fff !important;
}

body.sp-theme-studio .sp-msg-body {
	min-width: 0 !important;
}

body.sp-theme-studio .sp-msg .sp-reflection-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 6px !important;
}

body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-msg .sp-reflection-date {
	margin-left: auto !important;
	color: #2D2E2D !important;
	font-size: 12px !important;
	white-space: nowrap !important;
}

/* Action icons (edit/delete) stay tucked, only visible on hover */
body.sp-theme-studio .sp-msg .sp-edit-ref-btn,
body.sp-theme-studio .sp-msg .sp-delete-ref-form {
	margin-left: 0 !important;
	opacity: 0 !important;
	transition: opacity 0.15s !important;
}

body.sp-theme-studio .sp-msg:hover .sp-edit-ref-btn,
body.sp-theme-studio .sp-msg:hover .sp-delete-ref-form {
	opacity: 1 !important;
}

/* ============================================================
   Mobile (≤ 760px)
   ============================================================ */
/* ============================================================
   Hamburger toggle — hidden on desktop, shown ≤760px. The PHP
   header always emits a `.sp-nav-toggle` button; CSS controls
   its visibility per breakpoint. JS toggles `.sp-nav-open` on
   the referenced nav.
   ============================================================ */
body.sp-theme-studio .sp-nav-toggle {
	display: none !important;
	width: 44px !important;
	height: 44px !important;
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.25) !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin-left: auto !important;
	flex-shrink: 0 !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	transition: background 0.15s, border-color 0.15s !important;
}
body.sp-theme-studio .sp-nav-toggle:hover {
	background: rgba(255,255,255,0.08) !important;
	border-color: rgba(255,255,255,0.4) !important;
}
body.sp-theme-studio .sp-nav-toggle .sp-nav-toggle-bar {
	display: block !important;
	width: 20px !important;
	height: 2px !important;
	background: #fff !important;
	border-radius: 2px !important;
	transition: transform 0.2s, opacity 0.2s !important;
}
/* Animate bars to an X when open */
body.sp-theme-studio .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg) !important;
}
body.sp-theme-studio .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle-bar:nth-child(2) {
	opacity: 0 !important;
}
body.sp-theme-studio .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg) !important;
}

@media (max-width: 760px) {
	body.sp-theme-studio .sp-header-studio .sp-header-inner {
		padding: 14px 16px !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 12px !important;
		flex-wrap: nowrap !important;
	}
	body.sp-theme-studio .sp-logo {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}
	body.sp-theme-studio .sp-logo img {
		max-height: 56px !important;
		max-width: 220px !important;
	}
	body.sp-theme-studio .sp-client-meta {
		display: none !important;
	}
	body.sp-theme-studio .sp-nav-toggle {
		display: inline-flex !important;
	}
	body.sp-theme-studio .sp-tab-nav {
		display: none !important;
		padding: 8px !important;
		margin: 0 16px 16px !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 2px !important;
		overflow: visible !important;
		background: rgba(0,0,0,0.18) !important;
		border-radius: 12px !important;
	}
	body.sp-theme-studio .sp-tab-nav.sp-nav-open {
		display: flex !important;
	}
	body.sp-theme-studio .sp-tab-nav .sp-tab,
	body.sp-theme-studio .sp-tab-nav .sp-tab-utility {
		width: 100% !important;
		padding: 12px 16px !important;
		border-radius: 8px !important;
		text-align: left !important;
		justify-content: flex-start !important;
	}
	body.sp-theme-studio .sp-tab-nav .sp-tab-active {
		border-radius: 8px !important;
	}
	body.sp-theme-studio .sp-tab-spacer {
		display: none !important;
	}
	body.sp-theme-studio .sp-content {
		padding: 28px 16px 60px !important;
	}
	body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-dashboard h1 {
		font-size: 1.7em !important;
	}
	body.sp-theme-studio .sp-journey-card.sp-studio-card {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		padding: 22px !important;
	}
	body.sp-theme-studio .sp-studio-milestone-hero {
		padding: 22px !important;
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	body.sp-theme-studio .sp-studio-hero-side {
		border-left: none !important;
		border-top: 1px solid #e6e4dd !important;
		padding-left: 0 !important;
		padding-top: 16px !important;
		text-align: left !important;
		display: flex !important;
		align-items: baseline !important;
		gap: 12px !important;
	}
	body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-hero-pct-num {
		font-size: 28px !important;
	}
	body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-hero-pct-lbl {
		margin-top: 0 !important;
	}
	body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-milestone-hero h1 {
		font-size: 1.55em !important;
	}
	body.sp-theme-studio .sp-milestone-detail .sp-section {
		padding: 20px 22px !important;
	}
	body.sp-theme-studio .sp-studio-stat-strip {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	body.sp-theme-studio .sp-studio-activity-grid-2col {
		grid-template-columns: 1fr !important;
	}
	body.sp-theme-studio .sp-reflection-global-entry {
		padding: 20px 22px !important;
	}
	body.sprigly-portal.sp-theme-studio .sp-portal-shell .sp-studio-card-body h3 {
		font-size: 1.5em !important;
	}
}

@media (max-width: 460px) {
	body.sp-theme-studio .sp-studio-stat-strip {
		grid-template-columns: 1fr !important;
	}
}