/* Math Drill Presenter — clean, distraction-free presentation */

/* --- strip the surrounding site chrome on this page only --- */
/* (this stylesheet is loaded only on the drill page, so these global
    class selectors don't affect the rest of the site) */
.page_title,
.sub_description_holder,
.breadcrumb_share_row{ display:none !important; }
.innercontent{ padding:0 !important; margin:0 !important; }

.drill_presenter{
	--drill_accent:#2f6df0;
	display:flex;
	flex-direction:column;
	width:100%;
}

/* ---- setup / error cards ---- */
.drill_setup_card{
	background:#f6f8fb;
	border:1px solid #e2e6ea;
	border-radius:12px;
	padding:26px 28px;
	max-width:680px;
	margin:24px auto;
}
.drill_setup_card h2{ margin:0 0 8px; }
.drill_setup_card p{ margin:0 0 16px; color:#444; }
.drill_error_card{ background:#fff4f4; border-color:#f0c4c4; }
.drill_setup_form{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end; }
.drill_setup_form label{ display:flex; flex-direction:column; font-size:13px; gap:4px; color:#333; }
.drill_setup_form input{ padding:7px 9px; border:1px solid #bcc6d2; border-radius:7px; width:120px; font-size:15px; }

/* ---- the wizard: one decision per screen ---- */
.drill_wizard{
	max-width:720px;
	margin:26px auto 70px;
	padding:0 18px;
}
.drill_wizard h2{ margin:0 0 6px; font-size:26px; }
.drill_lede{ margin:0 0 22px; color:#5b6b80; font-size:15px; }

/* the trail doubles as the way back */
.drill_steps{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px;
	list-style:none; margin:0 0 22px; padding:0;
	font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:700;
	counter-reset:drill_step;
}
.drill_steps li{ display:flex; align-items:center; gap:8px; color:#b3bcc7; }
.drill_steps li::before{
	counter-increment:drill_step; content:counter(drill_step);
	display:inline-flex; align-items:center; justify-content:center;
	width:22px; height:22px; border-radius:50%;
	background:#e9edf2; color:#8a96a4; font-size:12px;
}
.drill_steps li + li::after{ content:''; }
.drill_steps li:not(:last-child){ padding-right:8px; }
.drill_steps li:not(:last-child)::after{
	content:'/'; color:#dfe4ea; font-weight:400; margin-left:8px;
}
.drill_steps li.is_done{ color:#5b6b80; }
.drill_steps li.is_done::before{ background:var(--drill_accent); color:#fff; }
.drill_steps li.is_here{ color:#1c2733; }
.drill_steps a{ color:inherit; text-decoration:none; }
.drill_steps a:hover{ text-decoration:underline; }

/* the choices on steps 1 and 2 */
.drill_choices{ display:flex; flex-direction:column; gap:8px; }
.drill_choices_wide{
	display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px;
}
.drill_choice{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:15px 18px;
	background:#f6f8fb; border:1px solid #e2e6ea; border-radius:11px;
	color:#1c2733; text-decoration:none;
	transition:background .12s ease, border-color .12s ease, transform .05s ease;
}
.drill_choice:hover{ background:#eaeff6; border-color:var(--drill_accent); }
.drill_choice:active{ transform:translateY(1px); }
.drill_choice:focus-visible{ outline:2px solid var(--drill_accent); outline-offset:2px; }
.drill_choice_label{ font-size:17px; font-weight:600; }
.drill_choice_note{ font-size:13px; color:#8a96a4; white-space:nowrap; }
.drill_choices_wide .drill_choice{ padding:20px; }

/* step 3 */
.drill_wizard .drill_setup_form{
	background:#f6f8fb; border:1px solid #e2e6ea; border-radius:11px;
	padding:20px 22px;
	gap:18px 24px;
}
.drill_wizard .drill_setup_form label{ font-size:13px; color:#5b6b80; font-weight:600; }
.drill_wizard .drill_setup_form input{ width:140px; font-size:17px; padding:9px 11px; }
.drill_go{
	font-family:inherit; font-size:17px; font-weight:700;
	background:var(--drill_accent); color:#fff;
	border:1px solid var(--drill_accent); border-radius:9px;
	padding:11px 26px; cursor:pointer;
}
.drill_go:hover{ filter:brightness(1.06); }
.drill_go:active{ transform:translateY(1px); }

.drill_back{
	display:inline-block; margin-top:18px;
	color:#8a96a4; text-decoration:none; font-size:14px; font-weight:600;
}
.drill_back:hover{ color:var(--drill_accent); text-decoration:underline; }

/* ---- name of the running drill + a way back to the picker ---- */
.drill_nowplaying{
	display:flex; align-items:center; justify-content:center; gap:14px;
	flex-wrap:wrap;
	padding:10px 16px 0;
	font-size:14px;
}
.drill_change{ color:var(--drill_accent); text-decoration:none; font-weight:600; }
.drill_change:hover{ text-decoration:underline; }
.drill_nowplaying_title{ color:#5b6b80; }

/* ---- stage: just the problem, centered on white ---- */
.drill_stage{
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	min-height: calc(100vh - 230px);   /* fill the space above the fixed bar */
	padding: 30px 24px 120px;          /* bottom room so the bar never overlaps */
	text-align:center;
}
.drill_problem{
	font-size: clamp(54px, 14vw, 210px);
	line-height:1.05;
	font-weight:700;
	color:#111;
}
/* make the sheet's flash markup adopt the big size; DON'T touch colors —
   the fill-in answer is a hidden white-on-white span that must stay invisible
   (its bottom border is the blank line the student writes on) */
.drill_problem table{ margin:0 auto; border-collapse:collapse; }
.drill_problem table,
.drill_problem td,
.drill_problem span{ font-size:inherit !important; }

.drill_starthint{
	position:fixed;
	left:0; right:0; bottom:78px;
	text-align:center;
	font-size:15px; color:#8a96a4;
	pointer-events:none;
}

/* ---- fixed bottom control bar ---- */
.drill_controls{
	position:fixed; left:0; right:0; bottom:0; z-index:60;
	display:flex; align-items:center; justify-content:center;
	gap:10px; flex-wrap:wrap;
	background:#ffffff;
	border-top:1px solid #e3e7ec;
	box-shadow:0 -3px 14px rgba(0,0,0,.06);
	padding:10px 16px;
}
.drill_controls button{
	background:#eef1f6; color:#1c2733; border:1px solid #dfe4ea; border-radius:9px;
	font-size:18px; line-height:1; padding:9px 14px; cursor:pointer;
	transition:background .12s ease, transform .05s ease;
}
.drill_controls button:hover{ background:#e2e7ef; }
.drill_controls button:active{ transform:translateY(1px); }
.drill_controls .drill_primary{
	background:var(--drill_accent); color:#fff; border-color:var(--drill_accent);
	font-size:20px; padding:10px 22px; font-weight:700;
}
.drill_controls .drill_primary:hover{ filter:brightness(1.06); background:var(--drill_accent); }
.drill_controls .drill_primary.is_playing{ background:#5b6b80; border-color:#5b6b80; }
.drill_toggle.is_muted{ background:#f3d9d9; border-color:#e7bcbc; }

.drill_progress{ font-size:15px; color:#5b6b80; min-width:62px; text-align:center; letter-spacing:.03em; }

.drill_rate_ctrl{ display:flex; align-items:center; gap:8px; margin-left:6px; font-size:13px; color:#5b6b80; }
.drill_rate_label{ opacity:.9; }
.drill_rate_ctrl input[type=range]{ width:150px; accent-color:var(--drill_accent); }
#drill_rate_val{ min-width:34px; text-align:right; color:var(--drill_accent); font-weight:600; }

/* ---- fullscreen: pure white, problem fills, bar pinned ---- */
.drill_presenter:fullscreen,
.drill_presenter.is_fullscreen{
	background:#fff; width:100%; height:100%;
}
.drill_presenter.is_fullscreen .drill_nowplaying{ display:none; }
.drill_presenter.is_fullscreen .drill_stage{ min-height:calc(100vh - 78px); }
.drill_presenter.is_fullscreen .drill_problem{ font-size: clamp(64px, 17vw, 300px); }

@media (max-width:640px){
	.drill_wizard{ padding:0 14px; }
	.drill_wizard h2{ font-size:22px; }
	.drill_wizard .drill_setup_form input{ width:100%; }
	.drill_problem{ font-size: clamp(42px, 17vw, 130px); }
	.drill_rate_ctrl input[type=range]{ width:104px; }
	.drill_controls{ gap:7px; padding:8px 10px; }
}

.drill_field_note{ display:block; font-weight:400; font-size:12px; color:#8a96a4; margin-top:4px; }