/* Projection exercises: given diagrams and separate answer grids. */
.count-question-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px);align-items:start;gap:26px;margin:18px 0}

.count-figure{margin:0;min-width:0;padding:12px 10px 0;border:1px solid #d8e3dd;border-radius:12px;background:#fff}
.count-figure figcaption{font-size:.9375rem;color:var(--muted);font-weight:500}
.count-diagram{display:block;width:100%;height:auto;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
.answer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.answer-input{display:flex;align-items:center;gap:8px}
.answer-input input{flex:1;min-width:0}
.answer-unit{flex:none;color:var(--muted);font-size:.9375rem;white-space:nowrap}
.subquestions{margin:1rem 0;padding-left:1.7em}
.subquestions li,.explanation-steps li{margin:.5rem 0;padding-left:.2em;line-height:1.8}
.explanation-steps{padding-left:1.6em;margin-top:0}
.explanation-steps li::marker{color:var(--green);font-weight:600}
.solution .count-question-layout h4{margin-top:0}
.model-link{margin-top:16px}
@media(max-width:720px){.count-question-layout{grid-template-columns:1fr;gap:14px}.count-figure{width:100%;max-width:340px;margin:auto}}
@media print{.count-question-layout{grid-template-columns:1fr 220px;gap:12px}.count-figure{break-inside:avoid}.count-diagram{max-width:220px}.model-link{display:none}}

.number-entry-help{font-size:.9375rem;color:var(--muted);line-height:1.8;margin:14px 0}
.prompt,.explanation-steps,.answer-summary{overflow-wrap:anywhere}
.math-token{white-space:nowrap;overflow-wrap:normal}
@media print{.number-entry-help{display:none}}

/* Match the chapter index and keep an area model legible on narrow screens. */
body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
.practice-header h1,.count-diagram{font-family:inherit}

.field-label{display:block;font-weight:600;margin-bottom:8px;line-height:1.6}
.direction-guide{background:#f0f7f3;border:1px solid #cadbd3;border-radius:16px;padding:20px 24px;margin:20px 0}
.direction-guide h2{font-size:1.1rem;margin:0 0 10px}
.direction-guide p{font-size:.9375rem;line-height:1.85;margin:8px 0}
.projection-answer{width:max-content;max-width:100%;margin:12px auto 8px;text-align:center}
.projection-grid{display:grid;grid-template-columns:repeat(var(--cols),44px);border:1px solid #8fa99d;border-bottom:3px solid var(--green);width:max-content}
.grid-square{appearance:none;display:block;width:44px;height:44px;border:1px solid #b2c9be;border-radius:0;background:#fff;margin:0;padding:0;cursor:pointer;touch-action:manipulation;box-shadow:none}
.grid-square.painted{background:#85b5a2;background-image:linear-gradient(135deg,transparent 44%,#719d8b 45%,#719d8b 51%,transparent 52%);background-size:8px 8px}
.grid-square:hover{box-shadow:inset 0 0 0 2px #487967}
.grid-square:focus-visible{outline:3px solid #b46f31;outline-offset:-3px;position:relative;z-index:1}
.grid-direction{display:block;font-size:.8125rem;color:var(--muted);margin-top:6px}
.projection-grid[aria-invalid="true"]{outline:2px solid #ad694b;outline-offset:4px}
.solution-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.solution-answer p{margin:.5em 0}
.static-grid{grid-template-columns:repeat(var(--cols),30px)}
.static-grid .grid-square{width:30px;height:30px;cursor:default}
.static-grid .grid-square:hover{box-shadow:none}
.explanation-steps{list-style:none;counter-reset:steps;padding-left:0}
.explanation-steps li{counter-increment:steps;position:relative;padding-left:1.8em}
.explanation-steps li::before{content:counter(steps);position:absolute;left:0;top:.3em;border:1px solid var(--green);border-radius:50%;width:1.15em;height:1.15em;text-align:center;line-height:1.15em;font-size:.8em;color:var(--green)}
@media(max-width:420px){.direction-guide{padding:16px}.count-figure{padding-left:8px;padding-right:8px}}
@media print{.projection-grid,.grid-square{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* Keep the diagram instructions and count table easy to scan. */
.grid-entry-help{font-size:.8125rem;line-height:1.7;color:var(--muted);margin:-5px 0 16px}
.arrangement-table{min-width:285px}
.arrangement-table caption{text-align:left;font-size:.875rem;color:var(--green);line-height:1.7;margin-bottom:8px}
.arrangement-table th,.arrangement-table td{white-space:nowrap;padding:8px 7px}
@media print{.grid-entry-help{display:none}}