@import url('../chapter18/chapter18.css');
:root{--graph-blue:#659aa9;--graph-light:#d2e7e9;--graph-orange:#c59862}
.graph-stage{background:linear-gradient(135deg,#fffefd,#f4f9f7);padding:8px;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.chart-svg{display:block;width:100%;height:auto;user-select:none;touch-action:pan-y;overflow:visible}
.chart-svg text{font-family:'Yu Gothic','Noto Sans CJK JP',sans-serif;fill:var(--ink);font-size:14px}
.chart-svg .grid{stroke:#dce8e3;stroke-width:1}.chart-svg .axis{stroke:#91a99e;stroke-width:1.5}.chart-svg .series{fill:none;stroke:#639aa7;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}.chart-svg .point{fill:white;stroke:#639aa7;stroke-width:2.5}.chart-svg .selected-point{fill:#e9d8a7;stroke:#a48c61}.chart-svg .bar{stroke:#78a4a9;stroke-width:1.5;fill:url(#bar-fill)}.chart-svg .bar.active{stroke:#a48c61;stroke-width:2.6}.chart-svg .cursor{stroke:#ac9467;stroke-width:1.5;stroke-dasharray:5 4}.chart-svg .hit{cursor:crosshair}.chart-title{font-size:1rem;font-weight:500;line-height:1.6;margin:4px 4px 0}.chart-legend{font-size:.8rem;color:var(--muted);margin:0 6px 5px}.chart-tools{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}.chart-tools button{min-width:44px}.chart-tools .chosen{background:#e7f1ea;border-color:#93b39e}.editor-range{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:#f2f7f3}.editor-range label{display:flex;align-items:center;justify-content:space-between;font-size:.88rem}.editor-range input[type=range]{width:100%;height:35px;accent-color:var(--green)}.editor-number{width:90px;min-height:42px;border:1px solid #bed3c6;border-radius:7px;text-align:center}
.activity-feedback{margin-top:8px;color:var(--deep);font-size:.85rem;line-height:1.75;min-height:1.75em}.data-cards{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.data-card{min-width:43px;min-height:42px;padding:5px 9px;border-radius:8px;border:1px solid #cdded3;background:#fffefd}.data-card.selected{background:#e8d9b6;border-color:#ad9566}.data-card.assigned{background:#e8f1eb;color:#5c7769}.data-card small{display:block;font-size:.6rem;line-height:1.2}.bin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bin{padding:10px 6px;border:1px solid #b8d1c2;border-radius:10px;background:#f5f9f5;min-height:67px;line-height:1.5;text-align:center}.bin strong{font-size:1.15rem;margin-left:5px}.bin span{display:block;font-size:.79rem}.given-table{border-collapse:collapse;font-size:.85rem;margin:10px 0;width:100%;text-align:center;background:#fffefd}.given-table th,.given-table td{border:1px solid #cadbd1;padding:7px 6px;white-space:normal}.given-table th{background:#edf4ee;font-weight:500}.table-wrap{overflow-x:auto;width:100%;margin-bottom:12px}.given-table caption{text-align:left;color:var(--muted);font-size:.8rem;margin-bottom:4px}
.plot-status{border-left:3px solid #c9d9c6;padding-left:10px;margin-top:10px;color:var(--muted);font-size:.82rem}.water-stage{background:linear-gradient(120deg,#fffefa,#eef6f4);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}.water-svg{display:block;width:100%;height:auto;max-height:215px}.water-svg text{font:14px 'Yu Gothic','Noto Sans CJK JP',sans-serif;fill:var(--ink)}.phase-buttons{display:flex;gap:7px;overflow-x:auto;margin-top:10px;padding-bottom:4px}.phase-buttons button{white-space:nowrap}.work-panel textarea{width:100%;min-height:88px;border:1px solid #cadbd1;border-radius:8px;font-size:.88rem;padding:8px;margin-top:6px;resize:vertical}.work-panel .answer-item{margin-top:10px}.work-panel .answer-item>span:first-child{min-width:0;overflow-wrap:anywhere}.work-panel label.answer-item{font-size:.86rem}.graph-practice .practice-card{margin:0;padding:20px}.graph-practice .practice-card>h1{font-size:1.3rem}.practice-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,1fr);gap:18px;margin-top:16px}.practice-layout .graph-widget{min-width:0}.practice-layout .response-area{min-width:0}.graph-practice .answer-field{justify-content:space-between;margin-bottom:10px}.graph-practice .answer-field label{flex:1;min-width:120px}.graph-practice .field-hint{width:100%}.graph-practice .answer-field input{max-width:100px}.graph-practice textarea{min-height:120px}.graph-practice .practice-record-row{display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem}.practice-record-row #practice-progress{color:var(--deep)}.mode-label{display:inline-block;padding:3px 11px;border-radius:20px;background:#edf4ee;color:var(--deep);font-size:.78rem}.graphic-note{font-size:.76rem;line-height:1.65;color:var(--muted);margin:9px 0}.question-links{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.question-links a{font-size:.82rem;color:var(--deep);text-decoration:underline;text-underline-offset:3px}.series-readout{background:#f6f9f5;padding:9px 11px;border-radius:8px;margin-top:6px;font-size:.83rem;color:var(--deep)}.practice-question-restart{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0}.practice-question-restart p{font-size:.77rem;color:var(--muted)}.table-break{display:block}.graph-hero-art{width:100%;max-width:340px;justify-self:center}.graph-hero-art svg{width:100%;height:auto}.graph-page .head h1{font-size:clamp(1.4rem,2.5vw,1.9rem)}.graph-page .model-panel{position:static}.graph-page .layout{grid-template-columns:minmax(0,1.4fr) minmax(330px,1fr)}
@media(max-width:850px){.graph-page .layout{grid-template-columns:minmax(0,1.2fr) minmax(290px,1fr)}.practice-layout{grid-template-columns:1fr}.graph-practice .practice-card{padding:17px}.given-table{font-size:.79rem}.given-table th,.given-table td{padding:5px 4px}}
@media(max-width:700px){.graph-page .layout{display:flex}.chart-title{font-size:.9rem}.chart-svg text{font-size:15px}.graph-stage{padding:4px}.chart-tools{gap:6px}.chart-tools .btn{padding:6px 9px;font-size:.8rem}.practice-layout{gap:14px}.chart-legend{font-size:.76rem}.graphic-note{font-size:.72rem}.bin span{font-size:.73rem}.water-svg{max-height:190px}.graph-page .head h1{font-size:1.35rem}.graph-practice .answer-field input{max-width:104px}.graph-practice .practice-card{padding:16px}.graph-page .model-head h2{font-size:.92rem}}
@media print{.chart-tools,.data-cards,.bin-grid,.editor-range,.activity-feedback,.phase-buttons{display:none}.practice-layout{display:block}.graph-stage{border:0}.water-stage{max-width:350px}.practice-card{break-after:page}}
/* Keep chart labels readable when the SVG is scaled to a phone. */
@media(max-width:700px){.chart-svg text{font-size:24px}.water-svg text{font-size:22px}.chart-svg .axis{stroke-width:2}.chart-svg .series{stroke-width:4}.chart-svg .point{stroke-width:3}}

/* Keep the response area close to the question on wide screens. */
@media(min-width:701px){.graph-page .layout{grid-template-rows:min-content 1fr}}
.graph-widget .activity-feedback:empty{min-height:0;margin:0}
/* A small division stays visible when the chart is scaled to a phone. */
.chart-svg .grid{stroke:#bdcec4;stroke-width:.8;vector-effect:non-scaling-stroke}
.chart-svg .grid-minor{stroke:#b4c7bd;stroke-width:.65;vector-effect:non-scaling-stroke}
.chart-svg .grid-mid{stroke:#92ad9f;stroke-width:.9;vector-effect:non-scaling-stroke}
.chart-svg .grid-major{stroke:#7f9d8f;stroke-width:1.1;vector-effect:non-scaling-stroke}
.chart-svg .axis-tick{stroke:#6c8b7c;stroke-width:.8;vector-effect:non-scaling-stroke}
.chart-svg .major-tick{stroke-width:1.1}
.chart-svg .axis{stroke:#607f70;stroke-width:1.3;vector-effect:non-scaling-stroke}
.chart-scale-note{margin:3px 5px 0;color:#3c6054;font-size:.8rem;line-height:1.6;font-weight:500}
.water-svg{max-height:320px}
@media(max-width:700px){.water-svg{max-height:260px}.chart-scale-note{font-size:.76rem}}