/* HireKeyz Academy: website theme (login, navbar, footer and every Academy page). v0.8 "paper and ink".
   Flat paper surfaces on a soft canvas, ink pills for primary actions, HireKeyz cobalt for progress and focus, and
   pastel tints that carry meaning: blue = learning, olive = done, yellow = certificates, pink = projects.
   Visual language adapted from 000h by Cojeev (MIT, see /credits). Change colours in the tokens below only.
   Loaded on all website pages via hooks.web_include_css. Fonts are self-hosted (OFL-1.1). */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("/assets/hirekeyz_academy/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

:root {
	/* surfaces and ink */
	--hk-canvas: #f5f4f0;
	--hk-paper: #ffffff;
	--hk-beige: #ece9e2;
	--hk-beige-2: #f1efe9;
	--hk-structure: #14171b;     /* dark rails, hero panels, primary pills */
	--hk-structure-quiet: #22272e;
	--hk-structure-line: #39404a;
	--hk-on-structure: #f3f5f8;
	--hk-structure-text: #bcc4cf;
	--hk-ink: #1b1f27;           /* body text */
	--hk-muted: #474b55;         /* secondary text, 8.9:1 on canvas */
	--hk-faint: #5a5e67;         /* meta text, 6.4:1 on canvas */
	--hk-hair: #dad6ce;          /* hairlines between static surfaces */
	--hk-edge: #77746f;          /* control edges, 4.5:1 */
	/* meaning */
	--hk-cobalt: #2f5bea;        /* progress, links, focus */
	--hk-cobalt-deep: #2147c7;
	--hk-cobalt-soft: #e8eeff;
	--hk-blue: #95bae8;  --hk-blue-soft: #e6eef9;    /* learning */
	--hk-olive: #a8bc75; --hk-olive-soft: #eaefde; --hk-olive-ink: #4f5a3a;  /* done */
	--hk-yellow: #f1d369; --hk-yellow-soft: #fcf4db; --hk-yellow-ink: #6a5c2f; /* certificates */
	--hk-pink: #f0a4cc;  --hk-pink-soft: #fbe9f3;    /* projects, attention */
	--hk-on-accent: #14171b;
	--hk-danger: #b92d28; --hk-danger-soft: #fae7e6;
	/* kept names for older page styles */
	--hk-night: #0b1636;
	--hk-lagoon: #10a296;
	--hk-brass: #d99a22;
	--hk-ice: var(--hk-canvas);
	--hk-glass: var(--hk-paper);
	--hk-glass-strong: var(--hk-paper);
	--hk-glass-edge: var(--hk-hair);
	--hk-shadow: none;
	--hk-blur: none;
	/* type, shape, motion */
	--hk-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hk-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
	--hk-radius: 20px;
	--hk-radius-sm: 12px;
	--hk-pill: 999px;
	--hk-float: 0 18px 40px -16px rgba(17, 17, 17, 0.28);
	--hk-jelly: cubic-bezier(.3, 1.3, .45, 1);
	--hk-enter: cubic-bezier(.2, .8, .2, 1);
}

/* ------------------------------------------------------------------ canvas */
body {
	font-family: var(--hk-font);
	color: var(--hk-ink);
	background: var(--hk-canvas);
	-webkit-font-smoothing: antialiased;
}
body :is(h1, h2, h3, h4) { font-family: var(--hk-display); letter-spacing: -0.02em; text-wrap: balance; }
::selection { background: var(--hk-pink-soft); }

/* ------------------------------------------------------------------ navbar and footer */
.navbar {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: rgba(245, 244, 240, 0.92) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hk-hair);
	box-shadow: none;
}
.navbar .navbar-brand { display: inline-flex; align-items: center; gap: 10px; }
.hk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hk-brand img { width: 30px; height: 30px; border-radius: 9px; }
.hk-brand span { font-family: var(--hk-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--hk-ink); }
.navbar .nav-link { font-weight: 500; color: var(--hk-ink) !important; border-radius: var(--hk-pill); padding-inline: 12px !important; transition: background .2s; }
.navbar .nav-link:hover { background: var(--hk-beige); }
.navbar .nav-item.active .nav-link { background: var(--hk-structure); color: var(--hk-on-structure) !important; }

.web-footer { background: var(--hk-canvas); border-top: 1px solid var(--hk-hair); color: var(--hk-faint); padding: 0 !important; }
/* One tidy row: "© HireKeyz Inc. · HireKeyz Academy" on the left, links on the right. Frappe renders empty logo and
   link-group blocks that otherwise leave a tall blank band above floating links. */
.web-footer > .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
	padding-top: 22px; padding-bottom: 22px; }
.web-footer :is(.footer-logo-extension, .footer-grouped-links):not(:has(a, img, p, span)) { display: none; }
.web-footer :is(.footer-links, .footer-info) { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.web-footer :is(.footer-links, .footer-info) > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; }
.web-footer :is(.footer-links, .footer-info) .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; margin: 0; text-align: start !important; }
.web-footer .footer-links .footer-col-left:empty { display: none; }
.web-footer .footer-info { order: 1; font-size: 14px; }
.web-footer .footer-links { order: 2; }
.web-footer .footer-info .footer-powered::before { content: "·"; margin-inline-end: 18px; color: var(--hk-hair); }
.web-footer .footer-links .footer-col-right { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.web-footer a.footer-link { color: var(--hk-muted); font-size: 14px; font-weight: 500; margin: 0 !important; }
.web-footer a.footer-link:hover { color: var(--hk-ink); }
@media (max-width: 575px) {
	.web-footer > .container { flex-direction: column; align-items: flex-start; }
	.web-footer .footer-links { order: 0; }
}

/* ------------------------------------------------------------------ Academy pages: shared tokens */
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr, .hkv) {
	--ink: var(--hk-ink);
	--muted: var(--hk-muted);
	--line: var(--hk-hair);
	--card: var(--hk-paper);
	--soft: var(--hk-beige-2);
	--brand: var(--hk-cobalt);
	--brand-soft: var(--hk-cobalt-soft);
	--good: var(--hk-olive-ink);
	--navy: var(--hk-structure);
	font-family: var(--hk-font);
	color: var(--hk-ink);
}
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr, .hkv, .hka-join) :is(h1, h2, h3) {
	font-family: var(--hk-display);
	letter-spacing: -0.02em;
	color: var(--hk-ink);
}
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr, .hkv) h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 600; line-height: 1.08; }

/* flat paper panels */
body :is(.hka .kpi, .hka .card, .hkl .box, .hkl .pcard, .hkc .cert, .hkc table, .hkcr .box, .hkp .hk-card,
		 .hkr .hk-card, .hkv .res, .hka-join) {
	background: var(--hk-paper);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid var(--hk-hair);
	border-radius: var(--hk-radius);
	box-shadow: none;
}
body :is(.hka td, .hkc td, .hkcr td, .hkp td, .hkr td) { border-bottom-color: var(--hk-hair); }
body :is(.hka th, .hkc th, .hkcr th, .hkp th, .hkr th) { border-bottom-color: var(--hk-hair); background: var(--hk-beige-2); color: var(--hk-faint); font-weight: 600; }

body .hka .kpi b { font-family: var(--hk-display); font-weight: 600; font-size: 32px; letter-spacing: -0.03em; color: var(--hk-ink); }
body .hka .bar, body .hkl .bar { background: var(--hk-beige); border-radius: var(--hk-pill); }
body .hka .bar i, body .hkl .bar > i { background: var(--hk-cobalt); border-radius: inherit; }

/* buttons and inputs */
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr) .btn {
	background: transparent;
	border: 1px solid var(--hk-edge);
	border-radius: var(--hk-pill);
	color: var(--hk-ink);
	font-weight: 600;
	padding: 8px 16px;
	transition: transform .2s var(--hk-jelly), background .2s;
}
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr) .btn:hover { background: var(--hk-beige-2); }
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr) .btn:active { transform: scale(.96); }
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr) .btn.primary,
body .hkv button,
body .hka-join button {
	background: var(--hk-structure);
	border-color: var(--hk-structure);
	color: var(--hk-on-structure);
	box-shadow: none;
}
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr) .btn.primary:hover, body .hkv button:hover, body .hka-join button:hover { background: #2a2f37; }
body .hkr .btn.pass { background: var(--hk-olive); border-color: var(--hk-olive); color: var(--hk-on-accent); }
body :is(.hka, .hkl, .hkc, .hkp, .hkr, .hkcr, .hkv, .hka-join) :is(input, select, textarea) {
	background: var(--hk-paper);
	border: 1px solid var(--hk-edge);
	border-radius: var(--hk-radius-sm);
}
body :is(.hkl, .hkc, .hkp, .hkr, .hka, .hkcr, .hkv, .hka-join, .hk-ui) :is(button, a, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--hk-cobalt);
	outline-offset: 2px;
}

/* older chips, badges and pills share the new tints */
body :is(.hkl, .hkc, .hkp, .hkr, .hka) :is(.chip, .badge, .pill) {
	border-radius: var(--hk-pill);
	background: var(--hk-beige);
	border-color: transparent;
	color: var(--hk-ink);
	font-weight: 600;
}
body :is(.hkr .pill.Pass, .hkl .badge.done) { background: var(--hk-olive-soft); color: var(--hk-olive-ink); }
body .hkl .badge.path { background: var(--hk-blue-soft); color: var(--hk-ink); }
body .hkl .badge.req { background: var(--hk-pink-soft); color: var(--hk-ink); }

/* the career-path hero band */
body .hkl .hero {
	background: var(--hk-structure);
	color: var(--hk-on-structure);
	border: 0;
	border-radius: 24px;
	box-shadow: none;
}
body .hkl .hero :is(h2, h3) { color: var(--hk-on-structure); }
body .hkl .hero .sub { color: var(--hk-structure-text); }
body .hkl .pcard.reco { border-color: var(--hk-ink); box-shadow: inset 0 0 0 1px var(--hk-ink); }

/* ------------------------------------------------------------------ shared components (class prefix hk-) */
.hk-ui { --gap: 16px; color: var(--hk-ink); font-family: var(--hk-font); }
.hk-ui .num, .hk-num { font-variant-numeric: tabular-nums; }
.hk-muted { color: var(--hk-muted); }
.hk-meta { color: var(--hk-faint); font-size: 13px; }
.hk-card { background: var(--hk-paper); border: 1px solid var(--hk-hair); border-radius: var(--hk-radius); padding: 22px; min-width: 0; }
.hk-card.tint-blue { background: var(--hk-blue-soft); border-color: transparent; }
.hk-card.tint-olive { background: var(--hk-olive-soft); border-color: transparent; }
.hk-card.tint-yellow { background: var(--hk-yellow-soft); border-color: transparent; }
.hk-card.tint-pink { background: var(--hk-pink-soft); border-color: transparent; }
.hk-card.dark { background: var(--hk-structure); color: var(--hk-on-structure); border-color: transparent; }
.hk-card.dark :is(h1, h2, h3) { color: var(--hk-on-structure); }
.hk-card.dark .hk-muted, .hk-card.dark .hk-meta { color: var(--hk-structure-text); }
.hk-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px; }
.hk-head h2, .hk-head h3 { margin: 0; }
.hk-ui h2 { font-size: 21px; line-height: 1.2; } .hk-ui h3 { font-size: 17px; line-height: 1.25; }

.hk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--hk-pill);
	border: 1px solid var(--hk-edge); background: transparent; color: var(--hk-ink) !important; font: 600 14px var(--hk-font); cursor: pointer;
	text-decoration: none !important; white-space: nowrap; transition: transform .2s var(--hk-jelly), background .2s; }
.hk-btn:hover { background: var(--hk-beige-2); }
.hk-btn:active { transform: scale(.96); }
.hk-btn.primary { background: var(--hk-structure); border-color: var(--hk-structure); color: var(--hk-on-structure) !important; }
.hk-btn.primary:hover { background: #2a2f37; }
.hk-btn.light { background: var(--hk-on-structure); border-color: var(--hk-on-structure); color: var(--hk-structure) !important; }
.hk-btn.ghost-dark { color: var(--hk-on-structure) !important; border-color: var(--hk-structure-line); }
.hk-btn.ghost-dark:hover { background: var(--hk-structure-quiet); }
.hk-btn.sm { min-height: 32px; padding: 0 13px; font-size: 13px; }
.hk-btn[disabled] { opacity: .55; cursor: default; }

.hk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: var(--hk-pill); font-size: 12px; font-weight: 600;
	background: var(--hk-beige); color: var(--hk-ink); white-space: nowrap; }
.hk-chip.blue { background: var(--hk-blue-soft); } .hk-chip.olive { background: var(--hk-olive-soft); color: var(--hk-olive-ink); }
.hk-chip.yellow { background: var(--hk-yellow-soft); color: var(--hk-yellow-ink); } .hk-chip.pink { background: var(--hk-pink-soft); }
.hk-chip.solid-blue { background: var(--hk-blue); color: var(--hk-on-accent); } .hk-chip.solid-olive { background: var(--hk-olive); color: var(--hk-on-accent); }
.hk-chip.solid-yellow { background: var(--hk-yellow); color: var(--hk-on-accent); } .hk-chip.solid-pink { background: var(--hk-pink); color: var(--hk-on-accent); }
.hk-chip.on-dark { background: var(--hk-structure-quiet); color: var(--hk-on-structure); }

.hk-track { height: 10px; border-radius: var(--hk-pill); background: var(--hk-beige); overflow: hidden; }
.hk-track > i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--hk-cobalt); transition: width .7s var(--hk-enter); }
.hk-track.olive > i { background: var(--hk-olive); } .hk-track.blue > i { background: var(--hk-blue); } .hk-track.sm { height: 6px; }
.hk-card.dark .hk-track { background: var(--hk-structure-line); } .hk-card.dark .hk-track > i { background: var(--hk-blue); }

/* toggle group with the travelling lozenge (hka_ui.js places .hk-lozenge under the pressed item) */
.hk-toggle { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--hk-pill); background: var(--hk-beige); max-width: 100%;
	overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.hk-toggle::-webkit-scrollbar { display: none; }
.hk-toggle > :is(a, button) { position: relative; z-index: 1; border: 0; background: none; min-height: 34px; padding: 0 16px; border-radius: var(--hk-pill);
	display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px var(--hk-font); color: var(--hk-muted) !important; cursor: pointer; white-space: nowrap;
	text-decoration: none !important; transition: color .2s; }
.hk-toggle > :is([aria-pressed="true"], [aria-current="page"], .on) { color: #f9fafc !important; }
.hk-toggle > .hk-lozenge { position: absolute; z-index: 0; top: 4px; height: calc(100% - 8px); border-radius: var(--hk-pill); background: #14171b; padding: 0;
	transition: left .42s var(--hk-jelly), width .42s var(--hk-jelly); pointer-events: none; }
.hk-toggle > :is(a, button) .n { font-size: 11.5px; opacity: .75; }

/* milestone path */
.hk-mpath { list-style: none; margin: 0; padding: 0; display: grid; }
.hk-mpath > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; }
.hk-mpath > li:last-child { padding-bottom: 0; }
.hk-mpath > li::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--hk-hair); border-radius: 2px; }
.hk-mpath > li.done::after { background: var(--hk-olive); }
.hk-mpath > li:last-child::after { display: none; }
.hk-mpath .mk { width: 34px; height: 34px; position: relative; z-index: 1; }
.hk-mpath b { display: block; font-weight: 600; font-size: 14.5px; }

/* requirement list (certificate tracker) */
.hk-req { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hk-req > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--hk-paper); border-radius: 14px; padding: 10px 12px; }
.hk-req .tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--hk-beige); color: var(--hk-muted); font-size: 11.5px; font-weight: 700; }
.hk-req .tick.ok { background: var(--hk-olive); color: var(--hk-on-accent); }
.hk-req .tick.part { background: var(--hk-blue); color: var(--hk-on-accent); }
.hk-req .tick.bad { background: var(--hk-pink); color: var(--hk-on-accent); }
.hk-req b { font-size: 14px; font-weight: 600; display: block; }

/* stat tiles, feed */
.hk-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hk-stat { background: var(--hk-beige-2); border-radius: 16px; padding: 14px; }
.hk-stat .v { font: 600 32px/1 var(--hk-display); letter-spacing: -0.03em; }
.hk-stat .k { font-size: 12.5px; color: var(--hk-muted); margin-top: 6px; }
.hk-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.hk-feed > li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--hk-hair); }
.hk-feed > li:first-child { border-top: 0; padding-top: 0; }
.hk-feed .ic { width: 34px; height: 34px; }
.hk-feed b { font-weight: 600; }
.hk-feed blockquote { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--hk-beige-2); font-size: 13.5px; color: var(--hk-muted); border: 0; }
.hk-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 28px 16px; color: var(--hk-muted); }
.hk-empty svg { width: 72px; height: 72px; }

/* organic shapes (paths filled by hka_ui.js from data-shape) */
svg.hk-shape { display: block; overflow: visible; flex: none; }
.hk-breathe { transform-origin: 50% 50%; animation: hk-breathe 6s ease-in-out infinite; }
.hk-spin { transform-origin: 50% 50%; animation: hk-spin 9s linear infinite; }
@keyframes hk-breathe { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(14deg); } }
@keyframes hk-spin { to { transform: rotate(360deg); } }

/* shader surfaces: hka_fx.js draws on canvas[data-hk-shader] where WebGPU is available; the CSS background is the fallback */
.hk-fx { position: relative; isolation: isolate; overflow: hidden; }
.hk-fx > canvas.hk-fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.hk-fx > canvas.hk-fx-canvas.live { opacity: 1; }
.hk-fx > canvas.hk-fx-canvas.interactive { pointer-events: auto; }
.hk-fx > :not(canvas) { position: relative; z-index: 1; }
.hk-fx.night { background: radial-gradient(60% 55% at 18% 22%, #2f5bea 0, transparent 70%), radial-gradient(55% 60% at 88% 72%, #10a296 0, transparent 70%),
	radial-gradient(45% 45% at 72% 12%, #6e56f0 0, transparent 70%), #0b1636; }
.hk-fx.aurora { background: radial-gradient(50% 80% at 85% 0%, rgba(47, 91, 234, .55), transparent 70%), radial-gradient(40% 60% at 65% 10%, rgba(16, 162, 150, .35), transparent 70%), var(--hk-structure); }
.hk-fx.chroma { background: radial-gradient(60% 70% at 90% 10%, #2a3c8f, transparent 70%), radial-gradient(50% 60% at 10% 100%, #4a2a52, transparent 70%), #14171b; }
.hk-fx.pastel { background: radial-gradient(60% 120% at 0% 0%, var(--hk-blue-soft), transparent 70%), radial-gradient(60% 120% at 100% 100%, var(--hk-pink-soft), transparent 70%), var(--hk-olive-soft); }
.hk-fx.medal { width: 150px; height: 150px; border-radius: 50%; flex: none;
	background: radial-gradient(circle at 34% 30%, #fff4d6 0, #f1d369 30%, #b8862b 62%, #5a3b00 100%); box-shadow: 0 14px 30px -14px rgba(90, 59, 0, .6); }
.hk-fx.medal:has(canvas.live) { background: transparent; box-shadow: none; }
.hk-fx.medal .face { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #3b2800; font: 700 13px/1.15 var(--hk-display); }
.hk-fx.medal:has(canvas.live) .face { display: none; }

/* toast */
.hk-toast { position: fixed; z-index: 2000; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: #14171b; color: #f9fafc;
	border-radius: var(--hk-pill); padding: 10px 18px; font: 600 14px var(--hk-font); box-shadow: var(--hk-float); animation: hk-pop .3s var(--hk-jelly); max-width: calc(100vw - 32px); }
@keyframes hk-pop { from { transform: translateX(-50%) scale(.94); opacity: 0; } }

/* ------------------------------------------------------------------ login: dark shader panel + paper form */
body[data-path="login"] { background: var(--hk-canvas); }
body[data-path="login"] .page-content-wrapper, body[data-path="login"] main { background: transparent; }

.hk-login-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	width: min(1040px, calc(100vw - 32px));
	margin: clamp(20px, 6vh, 64px) auto 40px;
	border-radius: 28px;
	overflow: hidden;
	background: var(--hk-paper);
	border: 1px solid var(--hk-hair);
}
.hk-login-aside { padding: 40px; color: var(--hk-on-structure); display: flex; flex-direction: column; gap: 22px; min-height: 520px; }
.hk-login-aside .hk-brand span { color: #fff; font-size: 19px; }
.hk-login-aside .hk-brand img { width: 40px; height: 40px; border-radius: 12px; }
.hk-login-aside h1 { font-family: var(--hk-display); font-weight: 600; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.035em; color: #fff; margin: auto 0 0; max-width: 12ch; }
.hk-login-aside p { margin: 0; color: rgba(243, 245, 248, 0.85); font-size: 15.5px; line-height: 1.55; max-width: 40ch; }
.hk-login-aside .hk-join { font-size: 14px; color: rgba(243, 245, 248, 0.78); }
.hk-login-aside .hk-join a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hk-login-floaters { position: absolute !important; inset: 0; pointer-events: none; z-index: 1; }
.hk-login-floaters svg { position: absolute; }
.hk-login-floaters .a { right: -46px; top: -30px; width: 190px; animation: hk-bob 9s ease-in-out infinite; }
.hk-login-floaters .b { right: 128px; top: 86px; width: 64px; animation: hk-bob 7s ease-in-out -2s infinite; }
.hk-login-floaters .c { right: -22px; bottom: -26px; width: 120px; animation: hk-bob 11s ease-in-out -4s infinite; }
@keyframes hk-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }

.hk-login-forms { background: var(--hk-paper); display: flex; align-items: center; }
.hk-login-forms > div { width: 100%; }
.hk-login-shell .login-content.page-card { max-width: none; width: 100%; margin: 0; padding: 44px; border: 0; box-shadow: none; background: transparent; }
.hk-login-shell .page-card-head .app-logo { display: none; }
.hk-login-shell .page-card-head h4 { font-family: var(--hk-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--hk-ink); }
.hk-login-shell .form-control { border-radius: 14px; min-height: 46px; background: #fff; border: 1px solid var(--hk-edge); }
.hk-login-shell .form-control:focus { border-color: var(--hk-cobalt); box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18); }
.hk-login-shell .es-button[data-variant="solid"] { background: var(--hk-structure); color: var(--hk-on-structure); border-radius: var(--hk-pill); min-height: 48px; font-weight: 600; }
.hk-login-shell .es-button[data-variant="solid"]:hover { background: #2a2f37; }
.hk-login-shell .es-button:not([data-variant="solid"]) { border-radius: var(--hk-pill); min-height: 44px; }

@media (max-width: 820px) {
	.hk-login-shell { grid-template-columns: 1fr; margin-top: 16px; }
	.hk-login-aside { padding: 26px 24px; gap: 12px; min-height: 0; }
	.hk-login-aside h1 { font-size: 30px; margin-top: 28px; }
	.hk-login-floaters .b, .hk-login-floaters .c { display: none; }
	.hk-login-floaters .a { width: 120px; right: -30px; top: 10px; }
	.hk-login-shell .login-content.page-card { padding: 28px 24px; }
}
@media (max-width: 560px) {
	body .hka .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	body .hka .kpi b { font-size: 26px; }
	body .hkp .actions { min-width: 0; max-width: 100%; }
	body .hkp .actions select { width: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.hk-breathe, .hk-spin, .hk-login-floaters svg, .hk-toast { animation: none !important; }
	.hk-toggle > .hk-lozenge, .hk-track > i, .hk-btn { transition: none !important; }
}

/* Frappe draws its own underline under the active navbar item; the ink pill replaces it. */
.navbar .nav-item.active, .navbar .nav-item.active .nav-link { border-bottom: 0 !important; box-shadow: none !important; }
.navbar .nav-item.active .nav-link::after { display: none !important; }