/**
 * Sprigly Portal Theme: Focus
 *
 * Layered on top of portal.css when body.sp-theme-focus is present.
 *
 * Focus is journey-centric: a 240px left sidebar carries the journey
 * switcher + an "Up Next" card, and the main column hosts a hero card
 * for the active journey plus two lower panels (Recent milestones,
 * For you). Differs from Studio's tabbed top-nav layout.
 *
 * Focus-only markup (emitted by Sprigly_Portal when active theme is
 * focus):
 *
 *   .sp-focus-header        brand-tinted top strip with logo + top-nav
 *   .sp-focus-top-nav       horizontal links (Dashboard, Resources, ...)
 *   .sp-focus-user-chip     pill with avatar + first-name
 *   .sp-focus-shell         240px sidebar + 1fr main grid
 *   .sp-focus-sidebar       sticky left column
 *   .sp-focus-side-nav      journey switcher list
 *   .sp-focus-side-card     Up Next milestone card
 *   .sp-focus-greeting      h1 + welcome + progress chip
 *   .sp-focus-hero-card     active journey hero
 *   .sp-focus-two-col       Recent milestones + For You panels
 *
 * Brand colours come from --sp-primary, --sp-primary-dark, --sp-brand-
 * tint, --sp-brand-tint-strong (injected on body.sprigly-portal by Lite
 * when a custom brand colour is set; :root fallbacks live below).
 *
 * @package Sprigly
 * @since   1.7.20
 */

/* ============================================================
   Variable fallbacks. Same :root specificity discipline as
   portal-studio.css — must be :root (0,0,1) so Lite's inline
   block on body.sprigly-portal (0,2,0) wins when a custom
   brand colour is set. See project_brand_tint_cascade.md.
   ============================================================ */
:root {
	--sp-focus-bg:    #fbfaf6;
	--sp-focus-line:  #ebe9e1;
	--sp-focus-ink:   #1a1f1c;
	--sp-focus-soft:  #2D2E2D;
	--sp-focus-faint: #9aa097;
	--sp-focus-radius: 14px;
	--sp-focus-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.04);
}

/* ============================================================
   Page surface
   ============================================================ */
body.sprigly-portal.sp-theme-focus {
	background: var(--sp-focus-bg) !important;
}

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

/* ============================================================
   Header — brand-tinted strip
   ============================================================ */
body.sp-theme-focus .sp-header-focus {
	background: linear-gradient(180deg, var(--sp-brand-tint) 0%, var(--sp-focus-bg) 100%) !important;
	border-bottom: 1px solid var(--sp-focus-line) !important;
	padding: 0 !important;
	position: relative !important;
}

body.sp-theme-focus .sp-header-focus .sp-header-inner {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 18px 32px !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 24px !important;
}

body.sp-theme-focus .sp-header-focus .sp-logo {
	flex: 0 0 auto !important;
}

body.sp-theme-focus .sp-header-focus .sp-logo img {
	max-height: 70px !important;
	max-width: 250px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-brand-name {
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: 0.3px !important;
	color: var(--sp-focus-ink) !important;
	line-height: 1.1 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-brand-tag {
	font-size: 12px !important;
	color: var(--sp-focus-soft) !important;
	margin-top: 3px !important;
	letter-spacing: 0.4px !important;
}

/* Top nav (horizontal links + user chip) */
body.sp-theme-focus .sp-focus-top-nav {
	margin-left: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-top-nav a.sp-focus-tab {
	padding: 8px 14px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--sp-focus-soft) !important;
	border-radius: 7px !important;
	transition: background 0.15s, color 0.15s !important;
}

body.sp-theme-focus .sp-focus-top-nav a.sp-focus-tab:hover {
	background: rgba(0,0,0,0.04) !important;
	color: var(--sp-focus-ink) !important;
}

body.sp-theme-focus .sp-focus-top-nav a.sp-focus-tab.sp-focus-tab-active {
	color: var(--sp-focus-ink) !important;
	background: rgba(255,255,255,0.7) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-user-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 6px 12px 6px 6px !important;
	background: #fff !important;
	border: 1px solid var(--sp-focus-line) !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--sp-focus-ink) !important;
	text-decoration: none !important;
}

body.sp-theme-focus .sp-focus-user-chip .sp-focus-user-avatar {
	width: 28px !important;
	height: 28px !important;
	border-radius: 999px !important;
	background: var(--sp-primary) !important;
	color: #fff !important;
	display: grid !important;
	place-items: center !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
}

/* Logout link in top nav uses the muted tab look */
body.sp-theme-focus .sp-focus-top-nav .sp-focus-tab-utility {
	color: var(--sp-focus-faint) !important;
	font-size: 13px !important;
}

/* ============================================================
   Shell — 240px sidebar + 1fr main
   ============================================================ */
body.sp-theme-focus .sp-content {
	max-width: 1240px !important;
	padding: 32px !important;
	display: grid !important;
	grid-template-columns: 240px 1fr !important;
	gap: 32px !important;
}

body.sp-theme-focus .sp-focus-sidebar {
	position: sticky !important;
	top: 24px !important;
	align-self: start !important;
	min-width: 0 !important;
}

body.sp-theme-focus .sp-focus-main {
	min-width: 0 !important;
}

/* Side label (My Journeys) */
body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-side-label {
	font-size: 15px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	color: #2D2E2D !important;
	margin: 15px 0 16px !important;
	padding: 0 12px !important;
}

/* Sidebar journey switcher */
body.sp-theme-focus .sp-focus-side-nav {
	background: #fff !important;
	border: 1px solid var(--sp-focus-line) !important;
	border-radius: 12px !important;
	padding: 3px 8px !important;
	margin-bottom: 18px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-side-link {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 5px 0 !important;
	padding: 10px 12px !important;
	text-decoration: none !important;
	color: var(--sp-focus-soft) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	border-radius: 8px !important;
	transition: background 0.15s, color 0.15s !important;
}

body.sp-theme-focus .sp-focus-side-link:hover {
	background: var(--sp-brand-tint) !important;
	color: var(--sp-focus-ink) !important;
}

body.sp-theme-focus .sp-focus-side-link.sp-focus-side-link-active {
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary) !important;
	font-weight: 600 !important;
}

/* Sidebar Up Next card */
body.sp-theme-focus .sp-focus-side-card {
	background: #fff !important;
	border: 1px solid var(--sp-focus-line) !important;
	border-radius: 12px !important;
	padding: 18px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-side-card h5 {
	margin: 0 0 12px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--sp-focus-ink) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-side-card p {
	margin: 0 0 12px !important;
	font-size: 17px !important;
	color: var(--sp-focus-soft) !important;
	line-height: 1.5 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-side-card a {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

body.sp-theme-focus .sp-focus-side-card a:hover {
	color: var(--sp-primary-darker) !important;
}

/* ============================================================
   Main content — greeting + hero + two-col
   ============================================================ */
body.sp-theme-focus .sp-focus-greeting {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 24px !important;
	margin-bottom: 28px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-greeting h1 {
	font-size: 30px !important;
	font-weight: 700 !important;
	letter-spacing: -0.6px !important;
	margin: 0 0 6px !important;
	color: var(--sp-focus-ink) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-greeting p {
	margin: 0 !important;
	color: var(--sp-focus-soft) !important;
	font-size: 17px !important;
}

/* Progress chip (mini meter + pct) */
body.sp-theme-focus .sp-focus-progress-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 10px 18px !important;
	background: #fff !important;
	border: 1px solid var(--sp-focus-line) !important;
	border-radius: 999px !important;
	box-shadow: var(--sp-focus-shadow) !important;
	font-size: 13px !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	color: var(--sp-focus-ink) !important;
}

body.sp-theme-focus .sp-focus-chip-meter {
	width: 80px !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: var(--sp-brand-tint-strong) !important;
	overflow: hidden !important;
}

body.sp-theme-focus .sp-focus-chip-meter > span {
	display: block !important;
	height: 100% !important;
	background: linear-gradient(90deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%) !important;
	border-radius: 999px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-chip-pct {
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	font-size: 13px !important;
}

/* Hero journey card */
body.sp-theme-focus .sp-focus-hero-card {
	background: #fff !important;
	border-radius: var(--sp-focus-radius) !important;
	box-shadow: var(--sp-focus-shadow) !important;
	padding: 32px !important;
	margin-bottom: 24px !important;
	border: 1px solid var(--sp-focus-line) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-hero-eyebrow {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.5px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	margin-bottom: 10px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-hero-card h2 {
	font-size: 26px !important;
	font-weight: 700 !important;
	margin: 0 0 12px !important;
	letter-spacing: -0.4px !important;
	color: var(--sp-focus-ink) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-hero-desc {
	color: var(--sp-focus-soft) !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
	margin: 0 0 24px !important;
	max-width: 600px !important;
}

/* Hero meta row (3 col stat strip with dividers) */
body.sp-theme-focus .sp-focus-hero-meta {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 0 !important;
	border-top: 1px solid var(--sp-focus-line) !important;
	border-bottom: 1px solid var(--sp-focus-line) !important;
	margin: 0 0 24px !important;
}

body.sp-theme-focus .sp-focus-hero-meta > div {
	padding: 16px 20px !important;
	border-right: 1px solid var(--sp-focus-line) !important;
}

body.sp-theme-focus .sp-focus-hero-meta > div:last-child {
	border-right: none !important;
	padding-right: 0 !important;
}

body.sp-theme-focus .sp-focus-hero-meta > div:first-child {
	padding-left: 0 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-hero-meta-k {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 1.3px !important;
	color: var(--sp-focus-faint) !important;
	font-weight: 600 !important;
	margin-bottom: 4px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-hero-meta-v {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--sp-focus-ink) !important;
}

body.sp-theme-focus .sp-focus-hero-actions {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
	flex-wrap: wrap !important;
}

/* Focus buttons mirror Studio's button feel */
body.sp-theme-focus .sp-focus-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 22px !important;
	background: var(--sp-primary) !important;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 9px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	border: none !important;
	cursor: pointer !important;
	transition: background 0.15s !important;
}

body.sp-theme-focus .sp-focus-btn:hover {
	background: var(--sp-primary-darker) !important;
	color: #fff !important;
}

body.sp-theme-focus .sp-focus-btn-ghost {
	background: transparent !important;
	color: var(--sp-focus-soft) !important;
	border: 1px solid var(--sp-focus-line) !important;
}

body.sp-theme-focus .sp-focus-btn-ghost:hover {
	background: #fff !important;
	color: var(--sp-focus-ink) !important;
}

/* Two-column lower section */
body.sp-theme-focus .sp-focus-two-col {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr !important;
	gap: 20px !important;
}

body.sp-theme-focus .sp-focus-panel {
	background: #fff !important;
	border-radius: var(--sp-focus-radius) !important;
	border: 1px solid var(--sp-focus-line) !important;
	box-shadow: var(--sp-focus-shadow) !important;
	padding: 24px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-panel h3 {
	margin: 0 0 4px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--sp-focus-ink) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-panel-sub {
	margin: 0 0 18px !important;
	color: var(--sp-focus-soft) !important;
	font-size: 17px !important;
}

/* ============================================================
   Global Reflections page (Focus). Studio defines equivalent
   rules under `body.sp-theme-studio` scope; Focus needs its own
   copies so each reflection card has a visible separator + jump
   link spacing. Without these, the "Open milestone →" anchor
   sits flush against the reflection content with no breathing
   room.
   ============================================================ */
body.sp-theme-focus .sp-reflection-actions {
	margin-top: 16px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--sp-focus-line) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell a.sp-reflection-jump {
	color: var(--sp-primary) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

body.sp-theme-focus a.sp-reflection-jump:hover {
	color: var(--sp-primary-darker) !important;
	text-decoration: underline !important;
}

/* Timeline items (Recent milestones) */
body.sp-theme-focus .sp-focus-timeline-item {
	display: grid !important;
	grid-template-columns: 32px 1fr auto !important;
	gap: 14px !important;
	padding: 14px 0 !important;
	border-top: 1px solid var(--sp-focus-line) !important;
	align-items: center !important;
	text-decoration: none !important;
	color: var(--sp-focus-ink) !important;
	transition: color 0.15s !important;
}

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

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

body.sp-theme-focus .sp-focus-tl-status {
	width: 28px !important;
	height: 28px !important;
	border-radius: 999px !important;
	display: grid !important;
	place-items: center !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
}

body.sp-theme-focus .sp-focus-tl-status-done {
	background: var(--sp-primary) !important;
	color: #fff !important;
}

body.sp-theme-focus .sp-focus-tl-status-active {
	background: #fff !important;
	color: var(--sp-primary) !important;
	border: 2px solid var(--sp-primary) !important;
}

body.sp-theme-focus .sp-focus-tl-status-pending {
	background: #f3f1ea !important;
	color: var(--sp-focus-faint) !important;
	border: 1px dashed var(--sp-focus-line) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-tl-title {
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--sp-focus-ink) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-tl-sub {
	font-size: 17px !important;
	color: var(--sp-focus-soft) !important;
	margin-top: 2px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-tl-meta {
	font-size: 15px !important;
	color: var(--sp-focus-faint) !important;
	white-space: nowrap !important;
}

/* ============================================================
   Global Reflections page (Focus). Lite renders the markup;
   Studio has theme-scoped rules in portal-studio.css. Focus
   needs its own copies so each reflection card renders with
   the white-card treatment, brand chip, and proper typography.
   ============================================================ */
body.sp-theme-focus .sp-reflections-global-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
}

body.sp-theme-focus .sp-reflection-global-entry {
	background: #fff !important;
	border: 1px solid var(--sp-focus-line) !important;
	border-radius: var(--sp-focus-radius) !important;
	padding: 24px 26px !important;
	box-shadow: var(--sp-focus-shadow) !important;
	position: relative !important;
	overflow: hidden !important;
	transition: box-shadow 0.2s !important;
}

body.sp-theme-focus .sp-reflection-global-entry::before {
	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-focus .sp-reflection-global-entry.sp-reflection-latest::before {
	background: var(--sp-primary) !important;
}

body.sp-theme-focus .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-focus .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: 13px !important;
	font-weight: 600 !important;
}

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

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-reflection-global-entry .sp-reflection-date {
	color: var(--sp-focus-faint) !important;
	font-size: 13px !important;
	margin-left: auto !important;
}

body.sprigly-portal.sp-theme-focus .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: var(--sp-focus-ink) !important;
}

/* Anchor inside the milestone title heading: inherit the heading
   colour instead of falling back to user-agent blue / visited-purple.
   Mirrors the Studio rules in portal-studio.css. */
body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-reflection-milestone-title a {
	color: inherit !important;
	text-decoration: none !important;
}

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

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

/* ============================================================
   Pro Resources page (Focus). Pro emits .sp-pro-resources*
   markup; portal-studio-pro.css styles it for Studio. Focus
   needs parallel rules here so the page reads properly when
   Focus is the active theme.
   ============================================================ */
body.sp-theme-focus .sp-pro-resources {
	max-width: 100% !important;
}

body.sp-theme-focus .sp-pro-resources-journey {
	margin-top: 24px !important;
}

body.sp-theme-focus .sp-pro-resources-journey-head {
	margin-bottom: 18px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resources-journey-head h2 {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--sp-focus-ink) !important;
	margin: 0 !important;
	letter-spacing: -0.3px !important;
}

/* Anchors inside the headings would otherwise inherit user-agent
   blue / visited-purple. Force inherit from the parent heading colour
   so journey + milestone links read as headings (not links) and hover
   reveals interactivity. */
body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resources-journey-head h2 a {
	color: inherit !important;
	text-decoration: none !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resources-journey-head h2 a:hover {
	color: var(--sp-primary-darker) !important;
}

body.sp-theme-focus .sp-pro-resources-group {
	margin-bottom: 22px !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resources-group .sp-section-eyebrow {
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1.4px !important;
	color: var(--sp-focus-soft) !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resources-group .sp-section-eyebrow a {
	color: inherit !important;
	text-decoration: none !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resources-group .sp-section-eyebrow a:hover {
	color: var(--sp-primary-darker) !important;
	text-decoration: underline !important;
}

body.sp-theme-focus .sp-pro-resources-list {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px !important;
}

body.sp-theme-focus .sp-pro-resource-item {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 14px 18px !important;
	background: #fff !important;
	border: 1px solid var(--sp-focus-line) !important;
	border-radius: 12px !important;
	box-shadow: var(--sp-focus-shadow) !important;
	text-decoration: none !important;
	color: var(--sp-focus-ink) !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
}

body.sp-theme-focus .sp-pro-resource-item:hover {
	border-color: var(--sp-brand-tint-strong) !important;
}

body.sp-theme-focus .sp-pro-resource-icon {
	width: 40px !important;
	height: 40px !important;
	border-radius: 10px !important;
	background: var(--sp-brand-tint) !important;
	display: grid !important;
	place-items: center !important;
	flex-shrink: 0 !important;
	font-size: 18px !important;
	line-height: 1 !important;
}

body.sp-theme-focus .sp-pro-resource-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resource-title {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--sp-focus-ink) !important;
	line-height: 1.3 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-pro-resource-meta {
	font-size: 13px !important;
	color: var(--sp-focus-faint) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	font-weight: 600 !important;
}

/* ============================================================
   For You panel — Pro renders this via the
   `sprigly_portal_dashboard_practitioner_activity` filter using
   the same `.sp-studio-activity-item` markup it emits for Studio.
   Focus restyles those items so each one sits on its own row
   with a hairline separator, matching the Recent milestones
   timeline rhythm above. Without these rules the items inherit
   the bare anchor styling and run together as one underlined
   blob.
   ============================================================ */
body.sp-theme-focus .sp-focus-panel .sp-studio-activity-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
	padding: 14px 0 !important;
	border-top: 1px solid var(--sp-focus-line) !important;
	text-decoration: none !important;
	color: var(--sp-focus-ink) !important;
	transition: color 0.15s !important;
}

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

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

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-panel .sp-studio-activity-item-title {
	font-size: 17px !important;
	font-weight: 600 !important;
	color: var(--sp-focus-ink) !important;
	line-height: 1.3 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-panel .sp-studio-activity-item-sub {
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--sp-focus-faint) !important;
	line-height: 1.4 !important;
}

/* Pro's stacked items also render a hidden status pill on the
   end. Suppress it in Focus too (Studio CSS already does the
   same trick — Focus needs its own copy because the Studio rule
   is theme-scoped). */
body.sp-theme-focus .sp-focus-panel .sp-studio-activity-item.sp-studio-activity-item-stacked .sp-studio-activity-item-pill {
	display: none !important;
}

/* For you quick items */
body.sp-theme-focus .sp-focus-quick-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 12px 0 !important;
	border-top: 1px solid var(--sp-focus-line) !important;
	text-decoration: none !important;
	color: var(--sp-focus-ink) !important;
}

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

body.sp-theme-focus .sp-focus-qi-icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	background: var(--sp-brand-tint) !important;
	color: var(--sp-primary) !important;
	display: grid !important;
	place-items: center !important;
	flex-shrink: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}

body.sp-theme-focus .sp-focus-qi-body {
	flex: 1 !important;
	min-width: 0 !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-qi-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--sp-focus-ink) !important;
}

body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-qi-meta {
	font-size: 12px !important;
	color: var(--sp-focus-soft) !important;
	margin-top: 2px !important;
}

/* ============================================================
   Journey + milestone pages — reuse Lite's render markup but
   sit under the Focus shell. Most styling cascades from the
   Studio rules; Focus only overrides where the visual rhythm
   needs to feel different (border-card style, no big hero).
   ============================================================ */
body.sp-theme-focus .sp-journey,
body.sp-theme-focus .sp-milestone-detail,
body.sp-theme-focus .sp-reflections,
body.sp-theme-focus .sp-reflections-global,
body.sp-theme-focus .sp-account {
	max-width: 100% !important;
	margin: 0 !important;
}

/* ============================================================
   Footer
   ============================================================ */
body.sp-theme-focus .sp-footer {
	color: var(--sp-focus-faint) !important;
	padding: 24px 0 40px !important;
	text-align: center !important;
}

/* ============================================================
   Mobile (≤ 960px) — sidebar moves above main, header wraps
   ============================================================ */
/* ============================================================
   Hamburger toggle (Focus variant — sits on the tinted header
   strip, so the icon bars use the dark ink colour instead of
   white). Hidden on desktop, shown ≤960px. JS toggles
   `.sp-nav-open` on the referenced `.sp-focus-top-nav`.
   ============================================================ */
body.sp-theme-focus .sp-nav-toggle {
	display: none !important;
	width: 44px !important;
	height: 44px !important;
	background: transparent !important;
	border: 1px solid var(--sp-focus-line) !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-focus .sp-nav-toggle:hover {
	background: rgba(0,0,0,0.04) !important;
	border-color: var(--sp-focus-ink) !important;
}
body.sp-theme-focus .sp-nav-toggle .sp-nav-toggle-bar {
	display: block !important;
	width: 20px !important;
	height: 2px !important;
	background: var(--sp-focus-ink) !important;
	border-radius: 2px !important;
	transition: transform 0.2s, opacity 0.2s !important;
}
body.sp-theme-focus .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg) !important;
}
body.sp-theme-focus .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle-bar:nth-child(2) {
	opacity: 0 !important;
}
body.sp-theme-focus .sp-nav-toggle[aria-expanded="true"] .sp-nav-toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg) !important;
}

/* ============================================================
   Rating buttons (1-N scale, Pro check-in field). Without this
   the inline width:44px from Pro's render_portal_input leaves
   the buttons as tight little squares. Focus stretches them to
   fill the row, matching Studio. Uses brand-darker for selected
   state so it tracks the practitioner's colour, not a fixed hex.
   ============================================================ */
body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-rating-group {
	display: flex !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

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

body.sprigly-portal.sp-theme-focus .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: var(--sp-focus-line) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--sp-focus-ink) !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-focus .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-focus .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;
}

@media (max-width: 960px) {
	body.sp-theme-focus .sp-content {
		grid-template-columns: 1fr !important;
		padding: 20px !important;
		gap: 20px !important;
	}
	body.sp-theme-focus .sp-focus-sidebar {
		position: static !important;
	}
	body.sp-theme-focus .sp-focus-greeting {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	body.sp-theme-focus .sp-focus-hero-meta {
		grid-template-columns: 1fr !important;
	}
	body.sp-theme-focus .sp-focus-hero-meta > div {
		border-right: none !important;
		border-bottom: 1px solid var(--sp-focus-line) !important;
		padding: 14px 0 !important;
	}
	body.sp-theme-focus .sp-focus-hero-meta > div:last-child {
		border-bottom: none !important;
	}
	body.sp-theme-focus .sp-focus-two-col {
		grid-template-columns: 1fr !important;
	}
	body.sp-theme-focus .sp-header-focus .sp-header-inner {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		padding: 14px 16px !important;
		align-items: center !important;
		gap: 12px !important;
	}
	/* Logo sizes to its own content (don't grow). Hamburger uses
	   `margin-left: auto` to push to the far right. Earlier rule
	   used `flex: 1 1 auto` on logo which expanded the wrapper to
	   fill the row, and the constrained image inside ended up
	   visually centred within that wide wrapper. */
	body.sp-theme-focus .sp-logo {
		flex: 0 1 auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
	}
	body.sp-theme-focus .sp-logo a {
		justify-content: flex-start !important;
	}
	body.sp-theme-focus .sp-nav-toggle {
		display: inline-flex !important;
		flex-shrink: 0 !important;
		margin-left: auto !important;
	}
	/* Drawer drops to a new row inside `.sp-header-inner` via
	   `flex-basis: 100%` + `order: 99`. Header-inner is
	   `flex-wrap: wrap` on mobile, so the nav (when displayed)
	   wraps to its own line below the logo + hamburger row.
	   Tried position:absolute earlier — kept failing for reasons
	   that weren't worth debugging further; flex-basis is more
	   robust because the nav remains a normal flex item, no
	   containing-block dependency. */
	body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-top-nav {
		display: none !important;
		flex-basis: 100% !important;
		order: 99 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 2px !important;
		margin: 8px 0 0 !important;
		padding: 8px !important;
		width: auto !important;
		background: #fff !important;
		border: 1px solid var(--sp-focus-line) !important;
		border-radius: 12px !important;
		box-shadow: var(--sp-focus-shadow) !important;
	}
	/* Use the nav's id (#sp-focus-tabs) to guarantee maximum CSS
	   specificity (1,x,0) — beats the mobile-default
	   display:none rule above without any chance of losing to an
	   unforeseen sibling rule. Two open paths: class-based (JS
	   adds `.sp-nav-open`) AND attribute-based (CSS-only fallback
	   using the button's aria-expanded — works even if the JS
	   doesn't fire). Whichever applies first wins, both produce
	   display:flex. */
	#sp-focus-tabs.sp-nav-open,
	.sp-nav-toggle[aria-expanded="true"] ~ #sp-focus-tabs {
		display: flex !important;
	}
	body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-top-nav a.sp-focus-tab {
		width: 100% !important;
		padding: 12px 14px !important;
		border-radius: 8px !important;
		text-align: left !important;
		justify-content: flex-start !important;
	}
	body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-user-chip {
		width: 100% !important;
		justify-content: flex-start !important;
	}
	body.sp-theme-focus .sp-focus-top-nav .sp-focus-tab,
	body.sp-theme-focus .sp-focus-top-nav .sp-focus-tab-utility,
	body.sp-theme-focus .sp-focus-top-nav .sp-focus-user-chip {
		margin-left: 0 !important;
	}
	body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-greeting h1 {
		font-size: 24px !important;
	}
	body.sp-theme-focus .sp-focus-hero-card {
		padding: 24px !important;
	}
	body.sprigly-portal.sp-theme-focus .sp-portal-shell .sp-focus-hero-card h2 {
		font-size: 22px !important;
	}
}