/* The Focus Mode frame: the points ring, the streak flame, the progress panel
   and the badge moment.

   THIS IS NOT THE KIT. It used to be called kit.css, and the name was wrong in
   a way that was about to become expensive. It is loaded by inc/frame.php on a
   LearnDash course that has opted in, and on nothing else. assets/kit.css is
   the one stylesheet every screen we draw ourselves loads last, and it carries
   the palette, the type and the face. If those two files had kept one name
   between them, the palette would have landed on live courses nobody asked us
   to touch.

   Everything here is scoped under body.st-kit. Tokens only, no colour
   literals, so changing a template in Settings changes every course on it
   (checklist row 11). Tokens come from inc/tokens.php at wp_head priority 1.

   Fallbacks in var() are the industrial-red defaults. They exist so a course
   with a broken template slug still renders something readable rather than
   transparent text on a transparent ground. */

/* ============================================================
   Header: the XP ring and the streak flame.
   Both sit in .ld-focus-header, whose colour belongs to the site skin
   (green today, red on the Forklift template). The chips therefore carry
   their own accent ground rather than borrowing the header's, so they stay
   legible whatever the frame colour is, and so the accent is visible in the
   header itself. That is also what makes a template change obvious at a glance.
   ============================================================ */

body.st-kit .st-kit-xp,
body.st-kit .st-kit-streak{
	display:inline-flex;align-items:center;gap:7px;
	background:var(--kit-accent,#C4002B);
	border:1px solid rgba(255,255,255,.25);
	color:#fff;
	font:800 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	padding:6px 13px 6px 8px;border-radius:999px;
	vertical-align:middle;
}
body.st-kit .st-kit-xp.is-inline,
body.st-kit .st-kit-streak.is-inline{margin-left:10px}
body.st-kit .st-kit-xp.is-floating{
	position:fixed;right:18px;bottom:18px;z-index:9999;
	box-shadow:0 2px 10px rgba(0,0,0,.18);
}

body.st-kit .st-kit-xp__ring{width:30px;height:30px;flex:0 0 30px;transform:rotate(-90deg)}
body.st-kit .st-kit-xp__track{
	fill:none;stroke:rgba(255,255,255,.3);stroke-width:3;
}
body.st-kit .st-kit-xp__fill{
	fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
	transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.3,1);
}
body.st-kit .st-kit-xp__n{font-variant-numeric:tabular-nums}
body.st-kit .st-kit-xp__l{
	font-size:10px;font-weight:700;letter-spacing:.1em;opacity:.85;
}

/* The flame is present but quiet until the streak is worth showing, so it
   does not read as "0" during a demo. */
body.st-kit .st-kit-streak{
	padding:6px 13px;
	background:transparent;border-color:rgba(255,255,255,.35);
	opacity:.6;transition:opacity .25s ease,background-color .25s ease;
}
body.st-kit .st-kit-streak.is-on{opacity:1;background:var(--kit-accent,#C4002B);border-color:transparent}
body.st-kit .st-kit-streak__ico{width:16px;height:16px;fill:currentColor}
body.st-kit .st-kit-streak.is-on .st-kit-streak__ico{fill:#FFC94A}
body.st-kit .st-kit-streak__n{font-variant-numeric:tabular-nums}
body.st-kit .st-kit-streak.is-broken{animation:st-kit-shake .45s ease}
@keyframes st-kit-shake{
	0%,100%{transform:translateX(0)}
	25%{transform:translateX(-3px)}
	75%{transform:translateX(3px)}
}

/* The flying "+N XP" chip. */
body.st-kit .st-kit-chip{background:var(--kit-accent,#C4002B)}

/* ============================================================
   Sidebar: the progress panel.
   ============================================================ */

body.st-kit .st-kit-panel{
	background:#fff;
	border:1px solid var(--kit-line,#D7DCE0);
	border-radius:12px;
	padding:16px 16px 14px;
	margin:0 0 16px;
	color:var(--kit-ink,#14181B);
	font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
body.st-kit .st-kit-panel__row{
	display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
body.st-kit .st-kit-panel__label{
	font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--kit-muted,#4A5259);
}
body.st-kit .st-kit-panel__xp{
	font-size:22px;font-weight:800;color:var(--kit-accent-text,#C4002B);
	font-variant-numeric:tabular-nums;
}
body.st-kit .st-kit-panel__xp i{font-size:11px;font-style:normal;font-weight:700;letter-spacing:.06em}
body.st-kit .st-kit-panel__lvl{
	display:flex;align-items:baseline;justify-content:space-between;gap:10px;
	margin:10px 0 6px;font-size:12px;color:var(--kit-muted,#4A5259);
}
body.st-kit .st-kit-panel__lvl b{color:var(--kit-ink,#14181B);font-weight:700}

body.st-kit .st-kit-bar{
	height:8px;border-radius:999px;overflow:hidden;
	background:var(--kit-tint,#FDECEF);
}
body.st-kit .st-kit-bar i{
	display:block;height:100%;border-radius:999px;
	background:var(--kit-accent,#C4002B);
	transition:width .6s cubic-bezier(.2,.7,.3,1);
}
body.st-kit .st-kit-bar--sm{height:5px;margin-top:6px}

body.st-kit .st-kit-badges{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
	gap:10px;margin:16px 0 0;
}
body.st-kit .st-kit-badge{
	display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
	opacity:.38;filter:grayscale(1);transition:opacity .3s ease,filter .3s ease;
}
body.st-kit .st-kit-badge.is-earned{opacity:1;filter:none}
body.st-kit .st-kit-badge__disc{
	width:38px;height:38px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--kit-tint,#FDECEF);
	color:var(--kit-accent-text,#C4002B);
	border:1px solid var(--kit-line,#D7DCE0);
}
body.st-kit .st-kit-badge.is-earned .st-kit-badge__disc{
	background:var(--kit-accent,#C4002B);color:#fff;border-color:transparent;
}
body.st-kit .st-kit-badge__name{
	font-size:10px;font-weight:700;line-height:1.2;color:var(--kit-muted,#4A5259);
}

body.st-kit .st-kit-next{
	margin-top:14px;padding-top:12px;border-top:1px solid var(--kit-line,#D7DCE0);
	font-size:12px;color:var(--kit-muted,#4A5259);
}
body.st-kit .st-kit-next b{display:block;color:var(--kit-ink,#14181B);font-size:13px}
body.st-kit .st-kit-next span{display:block}

body.st-kit .st-kit-panel__course{
	margin-top:14px;padding-top:12px;border-top:1px solid var(--kit-line,#D7DCE0);
	font-size:12px;color:var(--kit-muted,#4A5259);
}

/* ============================================================
   The badge moment.
   ============================================================ */

body.st-kit .st-kit-modal{
	position:fixed;inset:0;z-index:100000;
	display:flex;align-items:center;justify-content:center;padding:20px;
	background:rgba(10,14,17,.55);
	opacity:0;transition:opacity .22s ease;
}
body.st-kit .st-kit-modal.is-in{opacity:1}
body.st-kit .st-kit-modal__card{
	background:#fff;border-radius:16px;padding:28px 30px 24px;
	max-width:340px;width:100%;text-align:center;
	color:var(--kit-ink,#14181B);
	font:400 14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	box-shadow:0 18px 50px rgba(0,0,0,.3);
	transform:translateY(12px) scale(.96);
	transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
body.st-kit .st-kit-modal.is-in .st-kit-modal__card{transform:none}
body.st-kit .st-kit-modal__disc{
	width:66px;height:66px;margin:0 auto 14px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--kit-accent,#C4002B);color:#fff;
}
body.st-kit .st-kit-modal__disc svg{width:30px;height:30px}
body.st-kit .st-kit-modal__eyebrow{
	margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--kit-accent-text,#C4002B);
}
body.st-kit .st-kit-modal__title{margin:4px 0 6px;font-size:22px;font-weight:800;line-height:1.2}
body.st-kit .st-kit-modal__desc{margin:0 0 20px;color:var(--kit-muted,#4A5259)}
body.st-kit .st-kit-modal__btn{
	background:var(--kit-accent,#C4002B);color:#fff;border:0;
	padding:11px 26px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;
}
body.st-kit .st-kit-modal__btn:focus-visible{outline:3px solid var(--kit-accent-2,#8E0020);outline-offset:2px}

/* ============================================================
   Focus Mode itself is NOT styled here.

   The site-global skin (WPCode "st-fm-css") already paints the whole
   environment from --st-g / --st-a / --st-ink and friends, and its selectors
   reach `html body.ld-in-focus-mode .ld-focus-header`. inc/tokens.php feeds
   those variables from the active template on body.st-kit, so the existing
   skin renders in the template's colours. Adding overrides here would only
   start a specificity war with a layer that is already doing the job.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
	body.st-kit .st-kit-xp__fill,
	body.st-kit .st-kit-bar i,
	body.st-kit .st-kit-modal,
	body.st-kit .st-kit-modal__card,
	body.st-kit .st-kit-streak{transition:none}
	body.st-kit .st-kit-streak.is-broken{animation:none}
}

/* ============================================================
   Legacy co-existence (see inc/legacy-bridge.php).
   On a course still carrying st-design-copy the kit owns the frame, so the
   legacy furniture is hidden here rather than in script: this runs in the head
   and avoids a flash of two XP counters before the bridge is reached. The
   .dc-* widgets are deliberately left alone, because every st-design-copy rule
   is written `.st-dc .dc-thing` and removing the layer would strip them bare.
   ============================================================ */
body.st-kit--frame #stdc-xp,
body.st-kit--frame #stdc-streak,
body.st-kit--frame #dc-panel,
body.st-kit--frame #stdc-strip{display:none!important}