/* Student-facing companion site. Loaded after styles.css, so it reuses
   --primary/--surface/--border/.card/.days-badge/etc. and only adds what's
   different about the student experience: a friendlier header/nav, a
   grade-picker landing grid, and a step-list look for "Your Plan for
   Today" that reads like a checklist instead of a teacher pacing table. */

.student-header{background:linear-gradient(160deg, var(--primary), var(--primary-dark)); color:#fff; padding:24px}
.student-header h1{margin:0 0 8px; font-size:25px; letter-spacing:-.01em}
.student-header .eyebrow{margin:0 0 8px; color:rgba(255,255,255,.85)}
.student-header nav{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.student-header nav a{
	color:#fff; margin:0; text-decoration:none; font-weight:600; font-size:14px;
	padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); transition:background .15s ease;
}
.student-header nav a:hover, .student-header nav a:focus-visible{background:rgba(255,255,255,.28)}

/* A small, low-key one-liner -- not meant to compete with the title or the
   Do Now card below for attention, just a friendly touch in the page chrome. */
.joke-strip{
	margin:14px 0 0; padding:8px 14px; background:rgba(255,255,255,.12); border-radius:var(--radius-sm);
	font-size:14px; color:rgba(255,255,255,.92); font-weight:400;
}
.joke-strip strong{font-weight:700}

/* Student pages read bigger across the board -- this is the audience that
   asked for larger, easier-to-scan text. */
.student-body{font-size:19px}
.student-main .card h2{font-size:26px}
.student-main .card p, .student-main .card li, .student-main .card dd{font-size:19px; line-height:1.6}
.student-main .card dt{font-size:19px}

.student-main{padding:24px; max-width:var(--max-width); margin:0 auto}

/* Do Now is the very first thing on the page, on purpose -- a student
   walking in should see "what do I do right now" before anything else,
   in a visually distinct, larger, unmissable card. */
.do-now-card{
	background:var(--primary-light); border:2px solid var(--primary); border-left-width:8px;
	box-shadow:var(--shadow);
}
.do-now-card h2{font-size:28px}
.do-now-text{font-size:22px !important; line-height:1.5 !important; font-weight:600; margin:0}

.student-footer{padding:18px; background:var(--primary-dark); color:#fff; text-align:center; font-size:14px}
.student-footer a{color:#cfe1f5}

.step-list{padding-left:0; margin:10px 0; list-style:none; counter-reset:step}
.step-list li{
	margin:10px 0; line-height:1.55; padding:10px 14px 10px 46px; position:relative;
	background:var(--primary-light); border-radius:var(--radius-sm); counter-increment:step;
}
.step-list li::before{
	content:counter(step); position:absolute; left:10px; top:50%; transform:translateY(-50%);
	width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff;
	font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;
}
.day-block{margin:16px 0}
.day-block h3{margin:0 0 8px; font-size:17px; color:var(--primary-dark)}

.student-pager{display:flex; justify-content:space-between; padding:14px 4px; font-weight:700; font-size:16px}
.student-pager a{color:var(--primary); text-decoration:none}
.student-pager a:hover{text-decoration:underline}

.grade-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:16px; margin-top:16px}
.grade-card{
	display:block; text-align:center; background:var(--surface); border:1px solid var(--border);
	border-top:5px solid var(--primary); border-radius:var(--radius); padding:30px 12px;
	text-decoration:none; color:var(--primary-dark); font-weight:700; box-shadow:var(--shadow-sm);
	transition:transform .12s ease, box-shadow .12s ease;
}
.grade-card:hover, .grade-card:focus-visible{transform:translateY(-3px); box-shadow:var(--shadow)}
.grade-card h2{margin:0 0 6px; font-size:28px; color:var(--primary)}
.grade-card p{margin:0; font-size:14px; color:var(--muted); font-weight:600}

.find-lesson-card{margin-top:16px}
.find-band-row{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}
.find-band-btn{
	background:var(--surface); border:1px solid var(--border); color:var(--ink); font-weight:700; font-size:14px;
	padding:8px 16px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.find-band-btn:hover, .find-band-btn:focus-visible{border-color:var(--primary)}
.find-band-btn.is-active{background:var(--primary); border-color:var(--primary); color:#fff !important}
.find-date-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:12px 0}
.find-date-row label{font-weight:700; font-size:14px}
.find-date-row input[type="date"]{
	font:inherit; padding:7px 10px; border-radius:var(--radius-sm); border:1px solid var(--border);
	background:var(--surface); color:var(--ink);
}
#find-btn{
	background:var(--primary); color:#fff !important; border:none; font-weight:700; font-size:14px; cursor:pointer;
	padding:8px 18px; border-radius:var(--radius-sm); transition:background .15s ease;
}
#find-btn:hover, #find-btn:focus-visible{background:var(--primary-dark)}
.find-result{
	margin-top:14px; padding:14px 16px; background:var(--primary-light); border-radius:var(--radius-sm);
	border-left:4px solid var(--primary);
}
.find-result h3{margin:0 0 4px; font-size:16px; color:var(--primary-dark)}
.find-result-unit{margin:0 0 8px; font-size:13px; color:var(--muted); font-weight:600}
.find-result-link{display:inline-block; font-weight:700; color:var(--primary); text-decoration:none}
.find-result-link:hover{text-decoration:underline}

/* ---------- Dark mode (opt-in, NOT automatic) ---------- */
/* Same architecture as styles.css: light stays the default for
   every visitor regardless of OS/browser preference. These rules
   only apply under an explicit data-theme="dark" on <html>, which
   nothing currently sets -- kept for a future manual toggle. */
/* .student-header's gradient used var(--primary)/var(--primary-dark)
   directly -- in dark mode --primary becomes a BRIGHT blue (meant for
   links/badges on a dark surface, not a header background), so the
   header's white text had ~2.6:1 contrast near that end. Hardcode a
   dark-safe gradient instead, matching the fix already used for
   .site-header/.lesson-header in styles.css. */
[data-theme="dark"] .student-header{background:linear-gradient(160deg, #123a5c, #071726)}
[data-theme="dark"] .day-block h3{color:#bcdcf7}
[data-theme="dark"] .grade-card{color:#bcdcf7}
[data-theme="dark"] .step-list li::before{color:#04101c}
/* The active band button and the Find Lesson button both fill with
   var(--primary), which in dark mode is a BRIGHT blue meant for links/
   badges on a dark surface, not a solid button fill -- white text on it
   only reached ~2.6:1. Near-black text (the fix used for .btn/.download-
   btn elsewhere) technically passes contrast here too, but reads as a
   visible mismatch on a small pill this size -- so instead these two
   get their own solid, moderately-dark blue fill that's built to pair
   with white text (~6.7:1), plus a lighten-on-hover + glow ring instead
   of --primary-dark, which is close enough to the dark-mode page
   background to make the button all but disappear on hover. */
[data-theme="dark"] .find-band-btn.is-active{background:#1f5f96; border-color:#1f5f96; color:#fff}
[data-theme="dark"] #find-btn{background:#1f5f96; color:#fff}
[data-theme="dark"] #find-btn:hover, [data-theme="dark"] #find-btn:focus-visible{
	background:#2f74c9; box-shadow:0 0 0 4px rgba(94,166,230,.4);
}
[data-theme="dark"] .find-result h3{color:#bcdcf7}

@media (max-width:700px){
	.student-header h1{font-size:20px}
	.student-header nav a{display:inline-block}
}

@media print{
	.student-header nav, .student-pager, .slides-card, .handouts-card{display:none !important}
	.student-main{max-width:180mm; margin:0; padding:0}
	.step-list li{background:none; padding-left:26px}
	.step-list li::before{background:#000}
}