/**
 * Inspiring Me — Pitch Trainer
 * Core stylesheet. Design tokens match the brand spec:
 * bg #0a0a0a, gold #f5a623, green #1a5c35, card #141414.
 *
 * Every rule is scoped under body .imt-root and interactive elements carry
 * !important on background/color/border so the host theme's own button,
 * input and card styles (which are very common WordPress theme defaults)
 * cannot bleed through and override the trainer's look.
 */

body .imt-root {
	--imt-bg: #0a0a0a;
	--imt-gold: #f5a623;
	--imt-gold-dark: #c9860f;
	--imt-green: #1a5c35;
	--imt-card: #141414;
	--imt-border: rgba(255, 255, 255, 0.07);
	--imt-text: #f5f5f5;
	--imt-text-dim: #a8a8a8;
	--imt-red: #e5484d;
	--imt-green-ok: #3ecf6a;
	--imt-radius: 14px;

	background: #0a0a0a !important;
	color: #f5f5f5 !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	overflow: hidden;
	position: relative;

	/* Full-width edge-to-edge on phones. The desktop media query near the
	   bottom of this file re-introduces the 640px "card" look on wider
	   screens — change/remove that query if you want it boxed everywhere. */
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 640px;
}

body .imt-root,
body .imt-root * {
	box-sizing: border-box;
}

body .imt-root h1,
body .imt-root h2,
body .imt-root h3,
body .imt-root .imt-display {
	font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
	color: #f5f5f5 !important;
}

body .imt-root h1 { font-size: 30px; line-height: 1.15; }
body .imt-root h2 { font-size: 26px; line-height: 1.15; }
body .imt-root h3 { font-size: 20px; line-height: 1.2; }

body .imt-root p {
	margin: 0 0 14px;
	color: #f5f5f5 !important;
}

body .imt-root .imt-dim { color: #a8a8a8 !important; }

/* Layout */
body .imt-root .imt-screen {
	padding: 24px 20px 32px;
	min-height: 640px;
	display: flex;
	flex-direction: column;
	animation: imt-fade-in 0.28s ease;
}

@keyframes imt-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

body .imt-root .imt-navbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	background: #050505 !important;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}

body .imt-root .imt-navbar .imt-flame { color: #f5a623 !important; font-size: 20px; }

body .imt-root .imt-navbar .imt-wordmark {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 18px;
	color: #f5f5f5 !important;
}

/* Visual placeholder blocks (stand-in for Sora video loops) */
body .imt-root .imt-visual {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 18px;
	background: radial-gradient(circle at 30% 20%, rgba(245, 166, 35, 0.35), transparent 60%),
		linear-gradient(135deg, #142418 0%, #0a0a0a 70%) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,0.07);
}

body .imt-root .imt-visual video,
body .imt-root .imt-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body .imt-root .imt-visual .imt-visual-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #f5a623 !important;
	text-align: center;
	padding: 12px;
}

body .imt-root .imt-visual .imt-visual-fallback .imt-icon {
	font-size: 36px;
	line-height: 1;
}

body .imt-root .imt-visual .imt-visual-fallback small {
	color: #a8a8a8 !important;
	font-size: 12px;
	max-width: 80%;
}

/* Buttons */
body .imt-root .imt-btn {
	appearance: none;
	border: none;
	border-radius: 10px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 17px;
	padding: 15px 20px;
	min-height: 48px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform 0.12s ease, opacity 0.12s ease, background 0.12s ease;
	width: 100%;
	line-height: 1.2;
	box-shadow: none;
	text-decoration: none;
}

body .imt-root .imt-btn:active { transform: scale(0.98); }
body .imt-root .imt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

body .imt-root .imt-btn-primary {
	background: #f5a623 !important;
	color: #0a0a0a !important;
}
body .imt-root .imt-btn-primary:hover:not(:disabled) { background: #ffb84d !important; }

body .imt-root .imt-btn-ghost {
	background: transparent !important;
	color: #f5f5f5 !important;
	border: 1px solid rgba(255,255,255,0.07);
}
body .imt-root .imt-btn-ghost:hover:not(:disabled) { border-color: #f5a623; color: #f5a623 !important; }

body .imt-root .imt-btn-green {
	background: #1a5c35 !important;
	color: #fff !important;
}

body .imt-root .imt-btn-small {
	width: auto;
	font-size: 14px;
	padding: 10px 16px;
	min-height: 40px;
}

body .imt-root .imt-btn-row {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}
body .imt-root .imt-btn-row .imt-btn { flex: 1; }

/* Cards */
body .imt-root .imt-card {
	background: #141414 !important;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 14px;
}

body .imt-root .imt-card-active {
	border-color: #f5a623;
	box-shadow: 0 0 0 1px #f5a623;
}

body .imt-root .imt-coach-note {
	font-style: italic;
	color: #a8a8a8 !important;
	background: rgba(245, 166, 35, 0.06) !important;
	border-left: 3px solid #f5a623;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 14px;
	margin-bottom: 16px;
}

/* Progress bar (thin gold bar top of training screens) */
body .imt-root .imt-progressbar {
	height: 4px;
	width: 100%;
	background: rgba(255, 255, 255, 0.08) !important;
	position: relative;
}
body .imt-root .imt-progressbar > span {
	display: block;
	height: 100%;
	background: #f5a623 !important;
	transition: width 0.25s ease;
}

/* Stage pill */
body .imt-root .imt-pill {
	display: inline-block;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
	background: rgba(245, 166, 35, 0.12) !important;
	color: #f5a623 !important;
	border: 1px solid rgba(245, 166, 35, 0.3);
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 14px;
}

/* MC options */
body .imt-root .imt-option {
	display: block;
	width: 100%;
	text-align: left;
	background: #141414 !important;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 10px;
	color: #f5f5f5 !important;
	font-size: 16px;
	cursor: pointer;
	min-height: 48px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

body .imt-root .imt-option:hover:not(:disabled) { border-color: #f5a623; }
body .imt-root .imt-option:disabled { cursor: default; }

body .imt-root .imt-option.imt-correct {
	border-color: #3ecf6a;
	background: rgba(62, 207, 106, 0.08) !important;
}

body .imt-root .imt-option.imt-wrong {
	border-color: #e5484d;
	background: rgba(229, 72, 77, 0.08) !important;
	text-decoration: line-through;
	opacity: 0.75;
}

@keyframes imt-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}
body .imt-root .imt-shake { animation: imt-shake 0.4s ease; }

body .imt-root .imt-reason-box {
	font-size: 14px;
	border-radius: 8px;
	padding: 10px 12px;
	margin: -4px 0 10px;
}
body .imt-root .imt-reason-box.imt-reason-good {
	background: rgba(245, 166, 35, 0.08) !important;
	border: 1px solid rgba(245, 166, 35, 0.3);
	color: #f5a623 !important;
}
body .imt-root .imt-reason-box.imt-reason-bad {
	background: rgba(229, 72, 77, 0.06) !important;
	border: 1px solid rgba(229, 72, 77, 0.25);
	color: #f3a1a3 !important;
}

/* Fill-in-the-blank */
body .imt-root .imt-blank-line {
	font-size: 19px;
	line-height: 1.7;
	margin-bottom: 18px;
	color: #f5f5f5 !important;
}
body .imt-root .imt-blank-input {
	background: rgba(255, 255, 255, 0.06) !important;
	border: none;
	border-bottom: 2px solid #f5a623;
	color: #f5a623 !important;
	font-weight: 700;
	text-align: center;
	font-size: 17px;
	width: 110px;
	padding: 3px 6px;
	border-radius: 4px 4px 0 0;
	font-family: inherit;
	box-shadow: none;
}
body .imt-root .imt-blank-input.imt-blank-correct { border-color: #3ecf6a; color: #3ecf6a !important; }
body .imt-root .imt-blank-input.imt-blank-wrong { border-color: #e5484d; }

/* Recite textarea */
body .imt-root .imt-recite-input {
	width: 100%;
	min-height: 90px;
	background: #141414 !important;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	color: #f5f5f5 !important;
	font-size: 16px;
	padding: 14px;
	font-family: inherit;
	resize: vertical;
	box-shadow: none;
}
body .imt-root .imt-recite-input:focus {
	outline: none;
	border-color: #f5a623;
}

body .imt-root textarea.imt-textarea-large {
	width: 100%;
	min-height: 130px;
	background: #141414 !important;
	border: 2px solid #f5a623;
	border-radius: 10px;
	color: #f5f5f5 !important;
	font-size: 16px;
	padding: 14px;
	font-family: inherit;
	resize: vertical;
	box-shadow: none;
}
body .imt-root textarea.imt-textarea-large:focus { outline: none; }

body .imt-root input.imt-text-input {
	width: 100%;
	background: #141414 !important;
	border: 2px solid #f5a623;
	border-radius: 10px;
	color: #f5f5f5 !important;
	font-size: 16px;
	padding: 14px;
	font-family: inherit;
	min-height: 48px;
	box-shadow: none;
}
body .imt-root input.imt-text-input:focus { outline: none; }

/* Hint / feedback */
body .imt-root .imt-hint-btn {
	background: transparent !important;
	border: 1px solid rgba(255,255,255,0.07);
	color: #a8a8a8 !important;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	min-height: 40px;
}
body .imt-root .imt-hint-btn:hover { color: #f5a623 !important; border-color: #f5a623; }

body .imt-root .imt-feedback {
	font-size: 14px;
	margin-top: 8px;
	min-height: 20px;
}
body .imt-root .imt-feedback.imt-feedback-ok { color: #3ecf6a !important; }
body .imt-root .imt-feedback.imt-feedback-tip { color: #a8a8a8 !important; }

/* Dashboard rep ring */
body .imt-root .imt-rep-ring-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 18px 0 24px;
}
body .imt-root .imt-rep-ring-wrap svg { display: block; }
body .imt-root .imt-rep-ring-label {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	margin-top: 10px;
	color: #f5a623 !important;
	font-size: 14px;
}

/* Module / section tile grid */
body .imt-root .imt-tile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 8px 0 18px;
}
body .imt-root .imt-tile {
	background: #141414 !important;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 14px;
	padding: 16px 14px;
	cursor: pointer;
	position: relative;
	min-height: 110px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: left;
	color: #f5f5f5 !important;
	box-shadow: none;
	appearance: none;
}
body .imt-root .imt-tile:disabled,
body .imt-root .imt-tile.imt-tile-locked {
	cursor: not-allowed;
	opacity: 0.55;
}
body .imt-root .imt-tile:not(:disabled):hover { border-color: #f5a623; }
body .imt-root .imt-tile-title {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 0.01em;
	color: #f5f5f5 !important;
}
body .imt-root .imt-tile-sub {
	font-size: 12px;
	color: #a8a8a8 !important;
	margin-top: 4px;
}
body .imt-root .imt-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: 999px;
	margin-top: 10px;
	width: fit-content;
}
body .imt-root .imt-badge-locked { background: rgba(255,255,255,0.08) !important; color: #a8a8a8 !important; }
body .imt-root .imt-badge-progress { background: rgba(245,166,35,0.15) !important; color: #f5a623 !important; }
body .imt-root .imt-badge-mastered { background: rgba(62,207,106,0.15) !important; color: #3ecf6a !important; }
body .imt-root .imt-badge-soon { background: rgba(255,255,255,0.06) !important; color: #a8a8a8 !important; }

/* Technique picker list */
body .imt-root .imt-technique-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #141414 !important;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 10px;
	cursor: pointer;
	min-height: 48px;
}
body .imt-root .imt-technique-row:hover { border-color: #f5a623; }
body .imt-root .imt-technique-row .imt-technique-name {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	color: #f5f5f5 !important;
}
body .imt-root .imt-tag-suggested {
	font-size: 11px;
	color: #f5a623 !important;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.03em;
}
body .imt-root .imt-tag-done {
	font-size: 11px;
	color: #3ecf6a !important;
	text-transform: uppercase;
	font-weight: 700;
}

/* Banner (Close section) */
body .imt-root .imt-banner-gold {
	background: #f5a623 !important;
	color: #0a0a0a !important;
	border-radius: 10px;
	padding: 14px 16px;
	font-weight: 700;
	margin-bottom: 16px;
	font-size: 15px;
}

/* Milestone takeover */
body .imt-root .imt-milestone {
	position: absolute;
	inset: 0;
	background: #050505 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 24px;
	z-index: 10;
}
body .imt-root .imt-milestone .imt-milestone-number {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 72px;
	color: #f5a623 !important;
	line-height: 1;
	margin-bottom: 6px;
}

/* Exit confirm modal */
body .imt-root .imt-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.72) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 20;
}
body .imt-root .imt-modal {
	background: #141414 !important;
	border: 1px solid #f5a623;
	border-radius: 14px;
	padding: 22px;
	max-width: 340px;
	width: 100%;
}

/* Progress dots for scenario drill */
body .imt-root .imt-drill-progress {
	font-size: 13px;
	color: #a8a8a8 !important;
	margin-bottom: 10px;
}

/* Certificate */
body .imt-root .imt-cert-canvas-wrap {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.07);
	margin-bottom: 16px;
	background: #000 !important;
}
body .imt-root .imt-cert-canvas-wrap canvas { width: 100%; height: auto; display: block; }

body .imt-root .imt-back-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 18px;
	gap: 10px;
}
body .imt-root .imt-back-link {
	background: none !important;
	border: none;
	color: #a8a8a8 !important;
	font-size: 14px;
	cursor: pointer;
	padding: 8px 0;
	min-height: 40px;
}
body .imt-root .imt-back-link:hover { color: #f5a623 !important; }
body .imt-root .imt-back-link:disabled { opacity: 0.35; cursor: not-allowed; }

body .imt-root .imt-top-back {
	background: none !important;
	border: none;
	color: #a8a8a8 !important;
	font-size: 14px;
	cursor: pointer;
	padding: 14px 18px 0;
	align-self: flex-start;
	min-height: 40px;
}
body .imt-root .imt-top-back:hover { color: #f5a623 !important; }

body .imt-root .imt-stars {
	text-align: center;
	font-size: 34px;
	margin-bottom: 12px;
	letter-spacing: 4px;
}

/* Desktop: reintroduce a centered, boxed "card" look above phone widths.
   Delete this whole media query if you want full-width on every screen size. */
@media (min-width: 700px) {
	body .imt-root {
		max-width: 640px;
		margin: 0 auto;
		border-radius: 14px;
		box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
	}
}

/* Tablet and below: stack the module tiles into a single column so
   nothing gets clipped on narrower viewports. */
@media (max-width: 820px) {
	body .imt-root .imt-tile-grid {
		grid-template-columns: 1fr;
	}
	body .imt-root .imt-tile {
		grid-column: auto;
	}
}

@media (max-width: 380px) {
	body .imt-root h1 { font-size: 26px; }
	body .imt-root .imt-tile-grid { gap: 8px; }
}