/* 豆豆 · 衔接诊断「方格图」题干图形与方格纸作答 v1（开发包 C） */
.dgd-media { margin: 4px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dgd-media-box, .dgd-scroller { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
/* 正方格：宽度跟着格数走，格子太小时（手机上 20 列）保持最小格宽，在本区域内横向滚动，不裁边 */
.dgd-svg { display: block; margin: 0 auto; width: min(100%, calc((var(--dgd-cols) + 1.4) * 40px)); min-width: calc((var(--dgd-cols) + 1.4) * 22px); height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
/* 扩展1（r3）：只读图（题干图、讲解参考图）窄屏上整张缩小，但守住可读下限（S 级第 136 号）：
   每格不小于 17px；有点名标签的图字母不小于 11px（标签字号 0.62 格 → 每格不小于 11 ÷ 0.62 ≈ 17.75px）。
   守不住时保留这个最小宽度，在图区内横向滑动看全。默认按有标签的下限，不支持 :has() 的浏览器也不会低于两条下限；
   确认图里没有标签时放宽到 17px。格纸作答区仍保持 22px 最小格宽，桌面不受影响 */
.dgd-media-box .dgd-svg { min-width: calc((var(--dgd-cols) + 1.4) * 17.75px); }
.dgd-media-box .dgd-svg:not(:has(.dgd-label)) { min-width: calc((var(--dgd-cols) + 1.4) * 17px); }
.dgd-svg:focus { outline: none; }
.dgd-svg:focus-visible { outline: 3px solid #ee913b; outline-offset: 3px; border-radius: 8px; }
.dgd-paper { fill: #fffefa; stroke: #9db9aa; stroke-width: 0.05; }
.dgd-grid line { stroke: #d5e3db; stroke-width: 0.035; }
.dgd-shape { fill: none; stroke: #24332c; stroke-width: 0.08; stroke-linejoin: round; stroke-linecap: round; }
.dgd-shape.dgd-dashed { stroke-dasharray: 0.28 0.18; }
.dgd-shape.dgd-filled { fill: #c9d6ce; }
.dgd-axis { stroke: #cf3f2c; stroke-width: 0.07; stroke-dasharray: 0.34 0.2; }
.dgd-arrow { stroke: #5d7a6c; stroke-width: 0.07; }
.dgd-arrowhead { fill: #5d7a6c; }
.dgd-label-dot { fill: #24332c; }
.dgd-label { font: 600 0.62px/1 var(--dv-sans, system-ui, sans-serif); fill: #24332c; paint-order: stroke; stroke: #fffefa; stroke-width: 0.12; }
.dgd-line { stroke: #2e6fb0; stroke-width: 0.13; stroke-linecap: round; }
.dgd-line.selected { stroke: #ee913b; stroke-width: 0.18; stroke-dasharray: 0.3 0.12; }
.dgd-end { fill: #2e6fb0; }
.dgd-end.selected { fill: #ee913b; }
.dgd-start { fill: rgba(238, 145, 59, 0.25); stroke: #ee913b; stroke-width: 0.08; }
.dgd-cursor { fill: none; stroke: #ee913b; stroke-width: 0.05; stroke-dasharray: 0.1 0.08; }
.dgd-target line { stroke: #2f8f5b; stroke-width: 0.12; stroke-dasharray: 0.3 0.14; stroke-linecap: round; }
.dgd-pad { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dgd-legend, .dgd-status { margin: 0; color: #5d7a6c; font-size: 13px; font-weight: 600; line-height: 1.5; }
.dgd-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.dgd-tool { min-height: 44px; padding: 0 14px; border: 1.5px solid #c6dccf; border-radius: 12px; background: #fff; color: #285a40; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.dgd-tool:disabled { opacity: .45; cursor: default; }
.dgd-readonly .dgd-svg { cursor: default; }
.dgd-caption { margin: 0; color: #5d7a6c; font-size: 13px; font-weight: 700; }
.dgd-problem { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 12px 14px; border-radius: 14px; background: #fff0ed; color: #8f3427; font-size: 15px; font-weight: 700; line-height: 1.6; }
.dgd-problem p { margin: 0 0 10px; }
.dgd-problem-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dgd-problem-actions button { flex: 1; min-width: 120px; min-height: 44px; border: 1.5px solid #e2a197; border-radius: 14px; background: #fff; color: #8f3427; font: inherit; font-weight: 800; cursor: pointer; }
.dgd-alt { margin: 0; color: #5d7a6c; font-size: 13px; }
.dgd-reference { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 0; padding: 10px; box-sizing: border-box; border: 2px dashed #b9dcc6; border-radius: 16px; background: #f4faf6; }
/* 放在诊断题的网格布局里：不许被内容撑宽（否则手机上整列变宽、右边被裁） */
.dgd-wrap, .dgd-media, .dgd-reference, .dgd-note, .dgd-problem, .dgd-pad { min-width: 0; max-width: 100%; }
.dgd-svg { display: block !important; }
.dgd-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff6ec; color: #8a4b12; font-size: 14px; font-weight: 700; line-height: 1.5; }
@media (max-width: 520px) { .dgd-tool { padding: 0 10px; font-size: 14px; } }