/* HireKeyz Academy: the learning app at /lms in the v0.8 "paper and ink" look.
   The app is the unmodified upstream SPA; services/inject.py loads hka_theme.css (tokens, fonts, .hk-* components)
   and then this file. Here we only (1) map the app's own colour/font variables onto our tokens, (2) restyle a few
   recurring pieces (sidebar, buttons, tabs, course cards, the enroll card) and (3) hide the upstream onboarding.
   Selectors lean on the app's design-token class names; if an upgrade renames them, that piece falls back to the
   upstream look and nothing breaks. hka_lms.js adds the cover shapes, greeting band and live backgrounds. */

/* ------------------------------------------------------------------ 1. tokens (light) */
:root[data-theme="light"], :root:not([data-theme]) {
	--surface-base: var(--hk-canvas);
	--surface-sidebar: #efede7;
	--surface-alpha-sidebar: #efede7;
	--surface-elevation-1: var(--hk-paper);
	--surface-elevation-2: var(--hk-paper);
	--surface-elevation-3: var(--hk-paper);
	--surface-gray-1: #f1efe9;
	--surface-gray-2: #ece9e2;
	--surface-gray-3: #e4e0d7;
	--surface-gray-4: #d8d3c8;
	--surface-gray-5: #c4beb2;
	--surface-gray-8: #39404a;
	--surface-gray-9: #2a2f37;
	--surface-gray-10: var(--hk-structure);
	--surface-blue-1: #f3f6fe;
	--surface-blue-2: var(--hk-cobalt-soft);
	--surface-blue-3: #d6e0ff;
	--ink-gray-9: var(--hk-ink);
	--ink-gray-8: #262a32;
	--ink-gray-7: var(--hk-muted);
	--ink-gray-6: var(--hk-faint);
	--ink-gray-5: var(--hk-edge);
	--ink-gray-4: #9a968f;
	--ink-blue-link: var(--hk-cobalt);
	--ink-blue-6: var(--hk-cobalt-deep);
	--outline-gray-1: #e7e3db;
	--outline-gray-2: var(--hk-hair);
	--outline-gray-3: #c9c4ba;
	--outline-elevation-1: #e7e3db;
	--outline-elevation-2: #e7e3db;
}

/* ------------------------------------------------------------------ type */
html, .font-sans { font-family: var(--hk-font) !important; }
:root[data-theme="dark"] body { background: var(--surface-base); color: var(--ink-gray-9); }
:is(.text-3xl-semibold, .text-2xl-semibold, .text-xl-semibold, .text-lg-semibold, .text-2xl.font-semibold, .text-xl.font-semibold) {
	font-family: var(--hk-display); letter-spacing: -0.02em;
}
main h1 { font-family: var(--hk-display); letter-spacing: -0.02em; }
::selection { background: var(--hk-pink-soft); color: var(--hk-ink); }

/* ------------------------------------------------------------------ 2. sidebar */
.bg-surface-sidebar nav button { border-radius: var(--hk-pill) !important; }
.bg-surface-sidebar nav button.bg-surface-elevation-3 {
	background: var(--hk-structure) !important; color: var(--hk-on-structure) !important; box-shadow: none !important;
}
.bg-surface-sidebar nav button.bg-surface-elevation-3 :is(svg, span, div, [class*="lucide-"]) { color: var(--hk-on-structure) !important; }
:root[data-theme="dark"] .bg-surface-sidebar nav button.bg-surface-elevation-3 { background: var(--hk-on-structure) !important; color: var(--hk-structure) !important; }
:root[data-theme="dark"] .bg-surface-sidebar nav button.bg-surface-elevation-3 :is(svg, span, div, [class*="lucide-"]) { color: var(--hk-structure) !important; }
/* the "Complete your profile" card and similar sidebar cards: flat paper */
.bg-surface-sidebar .shadow-sm.rounded-lg { border-radius: var(--hk-radius-sm); box-shadow: none !important; border: 1px solid var(--outline-gray-2); }

/* ------------------------------------------------------------------ buttons and tabs */
button.inline-flex.items-center.justify-center.rounded-4 { border-radius: var(--hk-pill); }
button.bg-surface-gray-10 { font-weight: 600; }
button.bg-surface-gray-10:active, button.bg-surface-gray-2:active { transform: scale(.97); }
[role="radiogroup"] > .inline-flex.bg-surface-gray-2 { border-radius: var(--hk-pill); padding: 3px; }
[role="radiogroup"] button[data-slot="tab-button"], [role="radiogroup"] button[data-slot="tab-button"] > span { border-radius: var(--hk-pill) !important; }
[role="radiogroup"] button[data-slot="tab-button"] > span { padding-inline: 12px; }
[role="radiogroup"] button[data-slot="tab-button"] > span[data-state="active"] {
	background: var(--hk-structure) !important; color: var(--hk-on-structure) !important; box-shadow: none !important;
}
:root[data-theme="dark"] [role="radiogroup"] button[data-slot="tab-button"] > span[data-state="active"] { background: var(--hk-on-structure) !important; color: var(--hk-structure) !important; }

/* ------------------------------------------------------------------ course cards */
a > div.rounded-md.bg-surface-elevation-1:has(> div[style*="linear-gradient"], > div[data-hk-cover], > div.bg-cover) {
	border-radius: var(--hk-radius); border: 1px solid var(--outline-gray-2); box-shadow: none; overflow: hidden;
	transition: border-color .2s, transform .25s var(--hk-enter);
}
a:hover > div.rounded-md.bg-surface-elevation-1:has(> div[style*="linear-gradient"], > div[data-hk-cover], > div.bg-cover) { border-color: var(--hk-ink); }
a:focus-visible > div.rounded-md.bg-surface-elevation-1 { outline: 2px solid var(--hk-cobalt); outline-offset: 2px; }
/* covers without an image: tint + organic shape instead of the upstream black-to-red gradient */
div[style*="linear-gradient(to top right, black"], div[data-hk-cover] {
	position: relative; overflow: hidden; border: 0 !important; border-radius: 0 !important;
	background-image: none !important; background-color: var(--hk-blue-soft) !important;
}
div[data-hk-cover="yellow"] { background-color: var(--hk-yellow-soft) !important; --hk-tone: var(--hk-yellow); }
div[data-hk-cover="pink"] { background-color: var(--hk-pink-soft) !important; --hk-tone: var(--hk-pink); }
div[data-hk-cover="olive"] { background-color: var(--hk-olive-soft) !important; --hk-tone: var(--hk-olive); }
div[data-hk-cover="blue"] { --hk-tone: var(--hk-blue); }
div[data-hk-cover] > svg.hk-cover-shape {
	position: absolute; height: 118%; aspect-ratio: 1; right: -9%; bottom: -30%; z-index: 0; pointer-events: none;
	fill: var(--hk-tone, var(--hk-blue)); transform: rotate(-8deg);
}
:is(div[style*="linear-gradient(to top right, black"], div[data-hk-cover]) > div.text-white {
	position: relative; z-index: 1; color: var(--hk-ink) !important; font-family: var(--hk-display); font-weight: 600 !important;
	font-size: 25px !important; line-height: 1.08 !important; letter-spacing: -0.025em; text-align: start !important;
	justify-content: flex-start !important; align-items: flex-end !important; padding: 18px 20px !important; text-wrap: balance;
}
:root[data-theme="dark"] div[data-hk-cover] { background-color: var(--hk-structure-quiet) !important; }
:root[data-theme="dark"] div[data-hk-cover] > svg.hk-cover-shape { opacity: .5; }
:root[data-theme="dark"] :is(div[style*="linear-gradient(to top right, black"], div[data-hk-cover]) > div.text-white { color: var(--hk-on-structure) !important; }

/* ------------------------------------------------------------------ greeting band on /lms/courses (hka_lms.js) */
.hk-lms-hero {
	flex: none; margin: 20px 20px 4px; border-radius: var(--hk-radius); padding: 26px 28px; min-height: 172px;
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 28px; align-items: end;
	color: var(--hk-on-structure); font-family: var(--hk-font);
}
.hk-lms-hero h2 { margin: 0; font: 600 clamp(24px, 3vw, 34px)/1.05 var(--hk-display); letter-spacing: -0.03em; color: var(--hk-on-structure); }
.hk-lms-hero p { margin: 8px 0 0; color: var(--hk-structure-text); font-size: 15px; line-height: 1.5; max-width: 52ch; }
.hk-lms-hero .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hk-lms-hero .resume {
	background: rgba(20, 23, 27, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid rgba(243, 245, 248, .14); border-radius: var(--hk-radius-sm); padding: 16px 18px; min-width: 0;
}
.hk-lms-hero .resume .k { font-size: 13px; color: var(--hk-structure-text); }
.hk-lms-hero .resume b { display: block; margin: 4px 0 2px; font: 600 18px/1.2 var(--hk-display); letter-spacing: -0.01em; color: var(--hk-on-structure); }
.hk-lms-hero .resume .l { font-size: 13.5px; color: var(--hk-structure-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-lms-hero .resume .row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.hk-lms-hero .resume .hk-track { flex: 1; }
.hk-lms-hero .resume .pct { font: 600 13px var(--hk-font); color: var(--hk-on-structure); }
.hk-lms-hero .hk-btn { min-height: 38px; }
.hk-lms-hero .hk-btn.ghost-dark { border-color: rgba(243, 245, 248, .35); }
@media (max-width: 760px) {
	.hk-lms-hero { grid-template-columns: 1fr; margin: 12px 12px 0; padding: 22px 20px; }
}

/* ------------------------------------------------------------------ enroll / continue card on a course page */
.hk-lms-cta {
	border: 0 !important; border-radius: var(--hk-radius) !important; overflow: hidden; color: var(--hk-on-structure);
	--ink-gray-9: var(--hk-on-structure); --ink-gray-8: var(--hk-on-structure); --ink-gray-7: var(--hk-structure-text);
	--ink-gray-6: var(--hk-structure-text); --ink-gray-5: var(--hk-structure-text);
	--outline-gray-1: var(--hk-structure-line); --outline-gray-2: var(--hk-structure-line); --outline-gray-3: var(--hk-structure-line);
	--surface-gray-10: var(--hk-on-structure); --surface-gray-9: #ffffff; --surface-gray-8: #e3e7ee; --ink-base: var(--hk-structure);
	--surface-gray-2: rgba(243, 245, 248, .12); --surface-gray-3: rgba(243, 245, 248, .2);
}
.hk-lms-cta .text-3xl-semibold { font-size: 34px; }
.hk-lms-cta > :not(canvas) { position: relative; z-index: 1; }

/* a very long tag chip must not push the course page wider than a phone screen */
main .flex.flex-wrap > .rounded-full.whitespace-nowrap { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ lessons */
main :is(.ProseMirror, .prose) :is(h2, h3) { font-family: var(--hk-display); letter-spacing: -0.02em; }
main :is(.ProseMirror, .prose) table { border-color: var(--outline-gray-2); }
main :is(.ProseMirror, .prose) a { color: var(--hk-cobalt); }

/* ------------------------------------------------------------------ 3. upstream onboarding and product links (staff only) */
[data-testid="onboarding-help-modal"],
.bg-surface-sidebar div.rounded-lg:has(> button[aria-label="Start now"]),
.bg-surface-sidebar :is(.lucide-zap, .lucide-circle-help) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	a > div.rounded-md.bg-surface-elevation-1 { transition: none !important; }
	button.bg-surface-gray-10:active, button.bg-surface-gray-2:active { transform: none; }
}