/* Runner UI layout + main chrome (sidebar styles: node-runner/src/styles/lj-sidebar.css) */
#lj-runner { margin: 0; display: block; width: 100%; height: 100%; }
/* Neutral rail — beats inherited dashboard --akademi-sidebar-* on any ancestor */
#lj-runner .lj-sidebar {
	background: #ffffff;
	color: #0f172a;
}
.lj-app { background:#fff; border:0; border-radius:0; box-shadow:none; overflow:hidden }
/* Second column must not use 1fr — sidebar is fixed width (324/88/405px @ 90% of 360/450), so 1fr leaves a dead gap to the viewport edge */
.lj-layout { background:#fafbfc; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 }
.lj-main {
	background: #fff;
	grid-column: 1;
	padding: 20px 28px;
	padding-right: var(--lj-main-right-padding, 28px);
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.lj-main__stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	padding-bottom: 40px;
}
.lj-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 4px 20px;
	border-radius: 18px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(12px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	color: #0f172a;
	width: 100%;
	max-width: 100%;
	margin: 0 0 18px;
	box-sizing: border-box;
}
.lj-main-header__crumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #1f2937;
}
.lj-main-header__crumb-index {
	font-weight: 700;
}
.lj-main-header__crumb-title {
	text-transform: none;
	font-weight: 600;
	letter-spacing: 0;
}
.lj-main-header__crumb-sep {
	font-size: 16px;
	color: rgba(15, 23, 42, 0.55);
}
.lj-main-header__nav {
	width: 40px;
	height: 40px;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: rgba(255, 255, 255, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1f2937;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	margin: 0;
	padding: 0;
}
.lj-main-header__nav:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
	border-color: rgba(37, 99, 235, 0.35);
	color: #1d4ed8;
	background: rgba(255, 255, 255, 0.8);
}
.lj-main-header__nav:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
/* Study plan (Sejarah): descriptive context only — not a chapter title */
.lj-study-plan-context-note {
	margin: -6px 0 16px;
	padding: 10px 14px;
	border-radius: 12px;
	border: 1px solid rgba(37, 99, 235, 0.22);
	background: rgba(239, 246, 255, 0.85);
	color: #334155;
	font-size: 13px;
	line-height: 1.45;
	max-width: 100%;
	box-sizing: border-box;
}
.lj-study-plan-context-note__line {
	margin: 0;
	font-weight: 400;
}
.lj-study-plan-context-note__line + .lj-study-plan-context-note__line {
	margin-top: 6px;
}
.lj-card { box-shadow: 0 2px 10px rgba(2,6,23,.05) }

.lj-runner-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;min-height:60vh;padding:32px;color:#0f172a}
.lj-runner-loading__spinner{display:flex;gap:10px}
.lj-runner-loading__spinner span{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,#22d3ee 0%,#a855f7 60%,#f472b6 100%);animation:lj-runner-bounce 1.1s ease-in-out infinite;opacity:.85}
.lj-runner-loading__spinner span:nth-child(2){animation-delay:.15s}
.lj-runner-loading__spinner span:nth-child(3){animation-delay:.3s}
.lj-runner-loading__message{margin:0;font-size:18px;font-weight:600;line-height:1.4;max-width:420px}
@keyframes lj-runner-bounce{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}

.lj-header::after{display:none}
.lj-header__left{display:flex;align-items:center;gap:16px}
.lj-burger{display:none;width:32px;height:32px;background:color-mix(in srgb,currentColor 12%,transparent);border:0;position:relative;border-radius:10px;transition:transform .2s ease,background .2s ease}
.lj-burger:hover{transform:translateY(-1px);background:color-mix(in srgb,currentColor 20%,transparent)}
.lj-burger::before,.lj-burger::after{content:'';position:absolute;left:9px;right:9px;height:2px;background:currentColor;border-radius:2px}
.lj-burger::before{top:9px}.lj-burger::after{bottom:9px}
@media (max-width: 768px){.lj-burger{display:inline-block}}
.lj-brand{text-decoration:none}
/* Title link must use sidebar font token, not UA/theme link colours (span.lj-subject inherits from <a>) */
.lj-header .lj-brand{color:var(--akademi-sidebar-font-color,#ffffff)}
.lj-header .lj-brand:visited,.lj-header .lj-brand:hover,.lj-header .lj-brand:active{color:var(--akademi-sidebar-font-color,#ffffff)}
.lj-brand img{height:26px;filter:drop-shadow(0 6px 14px rgba(15,23,42,.25))}
.lj-subject{font-weight:700;font-size:16px;letter-spacing:.02em;color:inherit;text-transform:uppercase}
.lj-header__center{flex:1}
.lj-progressbar{height:10px;background:color-mix(in srgb,currentColor 18%,transparent);border-radius:999px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px rgba(15,23,42,.25)}
.lj-progressbar__fill{height:100%;background:linear-gradient(90deg,#22d3ee 0%,#a855f7 50%,#f472b6 100%);transition:width .35s ease;box-shadow:0 0 12px rgba(248,113,113,.45)}
.lj-header__right{display:flex;align-items:center;gap:12px;margin-left:auto}
.lj-save-indicator{min-width:120px;text-align:right;color:inherit;opacity:.88;font-weight:500;font-size:13px;line-height:1;margin-right:16px}
.lj-header__actions{display:flex;align-items:center;gap:10px}
.lj-header__icon{width:38px;height:38px;border-radius:12px;background:color-mix(in srgb,var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff)) 22%,transparent);color:var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff));display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease,border .2s ease,color .2s ease;border:1px solid color-mix(in srgb,var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff)) 32%,transparent);cursor:pointer;padding:0;margin:0;text-decoration:none}
.lj-header__icon span{display:inline-flex;width:20px;height:20px;color:inherit}
.lj-header__icon:visited{color:var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff))}
.lj-header__icon svg{width:20px;height:20px;stroke:currentColor;fill:none}
.lj-header__icon:hover,
.lj-header__icon:focus,
.lj-header__icon:active{
	background:color-mix(in srgb,var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff)) 36%,transparent);
	border-color:color-mix(in srgb,var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff)) 48%,transparent);
	transform:translateY(-1px);
	color:var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff));
}
.lj-header__icon:focus-visible{outline:2px solid color-mix(in srgb,currentColor 75%,transparent);outline-offset:2px}
.lj-header__icon svg{width:20px;height:20px}
.lj-header__icon--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.lj-header__icon--disabled:hover,.lj-header__icon--disabled:focus,.lj-header__icon--disabled:active{background:color-mix(in srgb,var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff)) 22%,transparent);border-color:color-mix(in srgb,var(--akademi-sidebar-icon-color,var(--akademi-sidebar-font-color,#ffffff)) 32%,transparent);transform:none}
.lj-header__logo{display:none}
.lj-header__logo img{height:32px;width:auto;display:block}
.lj-main__placeholder{padding:24px;border:1px dashed #cbd5e1;border-radius:8px;color:#475569;background:#f8fafc}
.lj-cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	max-width: 100%;
}
.lj-card {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.lj-actions{margin-top:8px}

.lj-drawer{position:fixed;inset:0;display:none;z-index:9999}
.lj-drawer.open{display:block}
.lj-drawer__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,23,42,.4);cursor:pointer;z-index:1;pointer-events:auto}
.lj-drawer__panel{position:absolute;top:0;left:0;bottom:0;width:80vw;max-width:calc(360px * 0.9);background:#fff;border-right:1px solid #e5e7eb;overflow:auto;z-index:2;pointer-events:auto}

/* Fullscreen take-over for learning_node */
body.single-learning_node #masthead,
body.single-learning_node .site-header,
body.single-learning_node #mobile-header,
body.single-learning_node .site-footer,
body.single-learning_node .site-bottom-footer-inner-wrap { display: none !important; }

body.single-learning_node .site,
body.single-learning_node .site-container,
body.single-learning_node .content-container.site-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

body.single-learning_node #wrapper.site.wp-site-blocks { padding: 0 !important; }

/* Make runner app fill viewport */

.lj-header{display:flex;align-items:center;gap:12px;padding:10px 25px;border-bottom:1px solid color-mix(in srgb,var(--akademi-sidebar-font-color,#ffffff) 20%,transparent);background:var(--akademi-sidebar-bg-color,#193852);position:sticky;top:0;z-index:10;color:var(--akademi-sidebar-font-color,#ffffff)}
/* Primary actions — overlay fill + sidebar font (node-runner.css loads after this file; #lj-runner raises specificity) */
#lj-runner .lj-button--primary,
#lj-runner .button-primary{background:var(--akademi-sidebar-overlay-color,#f5a925);color:var(--akademi-sidebar-font-color,#ffffff);border:1px solid color-mix(in srgb,var(--akademi-sidebar-font-color,#ffffff) 20%,transparent);box-shadow:0 2px 8px rgba(15,23,42,.12)}
#lj-runner .lj-button--primary:hover:not(:disabled),
#lj-runner .lj-button--primary:focus:not(:disabled),
#lj-runner .button-primary:hover:not(:disabled),
#lj-runner .button-primary:focus:not(:disabled){background:var(--akademi-sidebar-overlay-color,#f5a925);color:var(--akademi-sidebar-font-color,#ffffff);filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.18)}
#lj-runner .lj-button--primary:active:not(:disabled),
#lj-runner .button-primary:active:not(:disabled){filter:brightness(.95);transform:translateY(0);box-shadow:0 2px 8px rgba(15,23,42,.12)}
.lj-next-chapter{margin-top:32px;padding-top:24px;border-top:1px solid #e5e7eb;display:flex;justify-content:center}
.lj-next-chapter__btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:#2079b0;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(32,121,176,0.2)}
.lj-next-chapter__btn:hover:not(:disabled){background:#1a6a9a;transform:translateY(-1px);box-shadow:0 4px 12px rgba(32,121,176,0.3)}
.lj-next-chapter__btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 6px rgba(32,121,176,0.2)}
.lj-next-chapter__btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;opacity:.7}
body.single-learning_node { 
	overflow-x: hidden !important; 
	/* Allow vertical overflow for virtual keyboard */
}
/*
 * Tablet/mobile browser UI (address/tab bars) can make 100vh/100dvh effectively
 * taller than the visible viewport in non-fullscreen mode. Use 100svh so the
 * runner always fits inside the currently visible screen.
 */
body.single-learning_node #lj-runner {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	height: 100svh;
	display: block;
}
body.single-learning_node .lj-app { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
body.single-learning_node .lj-layout { overflow: hidden; height: 100%; min-height: 0; align-items: stretch; }
body.single-learning_node .lj-main {
	overflow: auto;
	min-height: 0;
	height: 100%;
	font-size: calc(1rem + 3px);
	/* Modern scrollbar styling - thin, subtle, auto-hiding */
	scrollbar-width: thin;
	scrollbar-color: rgba(15, 23, 42, 0.2) transparent;
}

/* Modern scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
body.single-learning_node .lj-main::-webkit-scrollbar {
	width: 8px;
}

body.single-learning_node .lj-main::-webkit-scrollbar-track {
	background: transparent;
}

body.single-learning_node .lj-main::-webkit-scrollbar-thumb {
	background: rgba(15, 23, 42, 0.2);
	border-radius: 4px;
	transition: background 0.2s ease;
}

body.single-learning_node .lj-main::-webkit-scrollbar-thumb:hover {
	background: rgba(15, 23, 42, 0.35);
}

/* Optional: To completely hide scrollbar, uncomment these:
body.single-learning_node .lj-main {
	scrollbar-width: none;
}
body.single-learning_node .lj-main::-webkit-scrollbar {
	display: none;
}
*/
body.single-learning_node .lj-main__stage { margin-top: auto; margin-bottom: auto; }

body.admin-bar.single-learning_node #lj-runner {
	top: 32px;
	height: calc(100vh - 32px);
	height: calc(100dvh - 32px);
	height: calc(100svh - 32px);
}


/* Container spacing like MVP subject page */


/* AI Open-Ended Card - Center prompt, artefact, and example */
.lj-ai-open-ended-prompt {
	text-align: center;
}

.lj-ai-open-ended-prompt p {
	margin: 0;
	line-height: 1.6;
}

/* Add spacing after line breaks in prompts */
.lj-ai-open-ended-prompt p br {
	display: block;
	content: "";
	margin-top: 12px;
	margin-bottom: 12px;
}

/* Style the example text if it appears inline */
.lj-ai-open-ended-prompt p::first-line {
	font-weight: 500;
}

.lj-ai-open-ended-artefact {
	text-align: center;
}

.lj-ai-open-ended-example {
	text-align: center;
}