/* Scoped to these two exercises, in the parent workspace and its iframe. */
.number-practice-page .math-workspace-bar { padding:12px 0; gap:12px; }
.number-practice-page .math-workspace-bar > strong { font-size:clamp(1.1rem,2vw,1.4rem); }
.number-practice-page .math-workspace-links { gap:8px; }
.number-practice-page .math-workspace-links a,.number-practice-page .math-workspace-links button { display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:700 .85rem/1.3 Arial,Helvetica,sans-serif; text-decoration:none; }
.number-practice-page .math-frame-shell { background:transparent; box-shadow:none; border:0; }
body.number-practice { --np-accent:#167c73; --np-tint:#e8f6f3; padding:0; font-family:Arial,Helvetica,sans-serif; }
html[data-theme=dark] .number-practice { --np-accent:#91e0d0; --np-tint:#244b48; }
.number-practice .quiz-container { display:block; width:100%; max-width:1100px; height:100%; margin:0 auto; padding:28px; overflow:auto; overscroll-behavior:contain; scroll-padding:20px; background:var(--le-paper)!important; border:1px solid var(--le-line)!important; border-radius:8px!important; box-shadow:0 10px 24px #1d2a380a!important; color:var(--le-ink); }
.number-practice .np-intro { max-width:650px; margin:clamp(0px,5vh,40px) auto 24px; }
.number-practice .np-intro h1 { margin:0 0 14px; font-size:clamp(1.5rem,3vw,2rem); line-height:1.2; }
.number-practice .np-intro p { font-size:1rem; line-height:1.65; color:var(--le-muted); margin:0 0 20px; }
.number-practice .np-eyebrow,.number-practice #taskProgress { margin:0 0 10px; color:var(--np-accent)!important; font-size:.75rem!important; font-weight:800; line-height:1.4; text-transform:uppercase; letter-spacing:.06em; }
.number-practice .np-example { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; margin:24px 0; padding:28px 20px; background:var(--np-tint); color:var(--np-accent); border-radius:8px; font-size:clamp(1.3rem,3vw,1.8rem); }
.number-practice .np-example math { font-size:2.8rem; }
.number-practice .np-example span { font-weight:400; }
.number-practice .np-intro .np-note { padding:0 0 0 14px; border-left:3px solid var(--np-accent); font-size:.9rem; }
.number-practice #startButton { display:block; margin:0 auto 24px; min-height:48px; padding:12px 24px; font:800 1rem/1.4 Arial,Helvetica,sans-serif; }
.number-practice .start-container { margin:0; }
.number-practice .quiz-container:has(#quizContent:not(.hidden)) > .np-intro { display:none; }
.number-practice #quizContent,.number-practice #quizForm { display:block; min-height:0; }
.number-practice #result { margin:0 0 12px; text-align:left; color:var(--le-muted)!important; font-size:.9rem; line-height:1.6; }
.number-practice .progress-container { height:6px; margin:0 0 28px; border:0; background:var(--le-soft); }
.number-practice #progressBar { height:6px; background:var(--np-accent)!important; }
.number-practice #questionList { padding:0; margin:0; overflow:visible; list-style:none; }
.number-practice #questionList > li.highlight { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.9fr); align-items:start; gap:28px; height:auto; padding:0; border:0; background:transparent!important; }
.number-practice .np-prompt h2,.number-practice .np-problem h2 { margin:0; color:var(--le-ink); font-size:clamp(1.2rem,2.4vw,1.5rem); line-height:1.3; }
.number-practice .np-fraction { display:flex; justify-content:center; align-items:center; gap:28px; min-height:210px; margin-top:18px; border-radius:8px; background:var(--np-tint); color:var(--np-accent); font-size:2.5rem; }
.number-practice .np-fraction math { font-size:4rem; }
.number-practice .np-unknown { font-weight:700; }
.number-practice .np-answer { min-width:0; padding:24px; border:1px solid var(--le-line); border-radius:8px; background:var(--le-soft); }
.number-practice .np-answer > label { display:block; margin:0 0 12px; font-weight:700; font-size:1rem; }
.number-practice .np-input-wrap { display:flex; align-items:center; gap:10px; font-size:1.25rem; }
.number-practice .np-input-wrap > input { width:100%; min-width:0; min-height:54px; padding:12px; font-size:1.25rem!important; }
.number-practice #answerHelp { margin:12px 0 0; color:var(--le-muted)!important; font-size:.9rem; line-height:1.6; }
.number-practice #fractionFeedback { margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--le-line); font-size:1rem; line-height:1.65; }
.number-practice .buttons { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:24px 0 0; flex-wrap:wrap; }
/* IDs also override the shared :is(#startButton, ...) rule's specificity. */
.number-practice .buttons button { flex:0 1 auto; min-height:48px; padding:12px 18px; font-size:.95rem; line-height:1.4; cursor:pointer; }
.number-practice #fractionReset,.number-practice #controls #howToBtn,.number-practice #controls #hintBtn { background:var(--le-paper)!important; color:var(--le-ink)!important; border:1px solid var(--le-line)!important; }
.number-practice #fractionReset { order:-1; margin-right:auto; }
.number-practice #controls #hintBtn { margin-right:auto; }
.number-practice #startButton:hover,.number-practice #fractionNext:hover,.number-practice #checkBtn:hover,.number-practice #nextBtn:hover { background:#f7a396!important; color:#20242a!important; }
.number-practice #fractionReset:hover,.number-practice #controls #howToBtn:hover,.number-practice #controls #hintBtn:hover { background:var(--le-soft)!important; border-color:var(--np-accent)!important; }
.number-practice :is(button,input,summary):focus-visible { outline:3px solid var(--np-accent)!important; outline-offset:3px; }
.number-practice input:focus { border-color:var(--np-accent)!important; }
.number-practice input::placeholder { color:var(--le-muted); opacity:1; }
.number-practice #fractionAnswer,.number-practice #resultInput,.number-practice #taskContainer .cross-container input { border-color:#7a8998!important; }
html[data-theme=dark] .number-practice #fractionAnswer,html[data-theme=dark] .number-practice #resultInput,html[data-theme=dark] .number-practice #taskContainer .cross-container input { border-color:#8da6b6!important; }
.number-practice #fractionAnswer:focus,.number-practice #resultInput:focus,.number-practice #taskContainer .cross-container input:focus { border-color:var(--np-accent)!important; }
.number-practice .np-answer:has(.correct) { border-color:var(--le-success); }
.number-practice .np-answer:has(.incorrect) { border-color:var(--le-error); }
.number-practice #taskContainer { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(240px,.8fr); align-items:start; gap:28px; overflow:visible; }
.number-practice #taskText { margin:18px 0 24px; font-size:clamp(1.05rem,2vw,1.2rem); color:var(--le-ink)!important; line-height:1.75; }
.number-practice #taskText mark { color:#473700; background:#ffed9a; padding:2px 3px; border-radius:3px; }
.number-practice .np-working { border-top:1px solid var(--le-line); padding-top:6px; }
.number-practice .np-working summary { min-height:44px; padding:12px 0; font-size:.95rem; font-weight:700; color:var(--np-accent); cursor:pointer; }
.number-practice .np-working-note { margin:6px 0 18px; font-size:.85rem; line-height:1.6; color:var(--le-muted); }
.number-practice .cross-container { display:flex; flex-direction:column; gap:12px; margin:0; padding:16px; background:var(--le-soft); border:1px solid var(--le-line); border-radius:8px; font-size:1rem; }
.number-practice .cross-line,.number-practice .equation-line,.number-practice .blank-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font-size:1rem; }
.number-practice .cross-line > label,.number-practice .equation-line > label { display:inline-flex; align-items:center; gap:4px; }
.number-practice #taskContainer .cross-container input { width:72px!important; min-width:0; min-height:44px; padding:8px 4px; text-align:center; font-size:1rem!important; }
.number-practice #taskContainer .blank-line input { width:calc(50% - 18px)!important; }
.number-practice #feedback { padding:0; margin:20px 0 0; font-size:1rem; line-height:1.6; font-weight:700; text-align:left; }
.number-practice #feedback:empty { display:none; }
.number-practice #resultSpan:empty { display:none; }
.number-practice #questionList > .np-completion,.number-practice #taskContainer > .np-completion { display:block; height:auto; grid-column:1/-1; padding:24px; border:1px solid var(--le-line); border-radius:8px; background:var(--np-tint); color:var(--le-ink); }
.number-practice .np-completion h2 { margin:0 0 12px; font-size:1.5rem; }
.number-practice .np-completion p { margin:0; font-size:1rem; line-height:1.6; }
.number-practice #instruction { position:static; inset:auto; max-width:760px; margin:0 0 24px; padding:24px; overflow:visible; border:1px solid var(--le-line); box-shadow:none; font-size:1rem; line-height:1.7; }
.number-practice #instruction h2 { margin:0 0 16px; font-size:1.4rem; }
.number-practice #instruction p { margin:14px 0 0; }
.number-practice #closeInstruction { float:right; margin:0 0 12px 12px; min-height:44px; padding:8px 12px; color:var(--le-ink); background:var(--le-paper); border:1px solid var(--le-line); border-radius:8px; cursor:pointer; }
.number-practice .np-rule { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 20px; padding:16px; background:var(--np-tint); color:var(--np-accent); border-radius:8px; }
.number-practice .math-continue-hint { font-size:.8rem; font-weight:400; line-height:1.6; margin-top:12px; }
@media(max-width:700px) {
  .number-practice .quiz-container { padding:18px; }
  .number-practice .np-intro { margin:0 auto 20px; }
  .number-practice .np-example { gap:12px; padding:20px 12px; }
  .number-practice #questionList > li.highlight,.number-practice #taskContainer { grid-template-columns:minmax(0,1fr); gap:18px; }
  .number-practice .np-fraction { min-height:140px; margin-top:12px; font-size:2rem; }
  .number-practice .np-fraction math { font-size:3.3rem; }
  .number-practice .np-answer { padding:18px; }
  .number-practice .progress-container { margin-bottom:20px; }
  .number-practice .buttons { margin-top:18px; }
  .number-practice #fractionNext,.number-practice #controls #checkBtn,.number-practice #controls #nextBtn { width:100%; order:-1; }
  .number-practice #fractionReset { order:0; width:100%; margin:0; }
  .number-practice #controls #howToBtn,.number-practice #controls #hintBtn { flex:1; margin:0; }
  .number-practice #taskText { margin:12px 0 18px; }
  .number-practice .cross-container { padding:12px; }
  .number-practice #instruction { padding:18px; }
  .number-practice-page .math-workspace-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; padding:6px 0; gap:6px 10px; }
  .number-practice-page .math-workspace-bar > strong { grid-column:1; grid-row:1; }
  .number-practice-page .math-workspace-bar > .exercise-utility-tools { grid-column:2; grid-row:1; }
  .number-practice-page .math-workspace-links { grid-column:1/-1; grid-row:2; }
  .number-practice-page .math-workspace-links a,.number-practice-page .math-workspace-links button { padding:6px 8px; font-size:.75rem; }
}