/* The diagramming extras (js/diagram/paper-view.js, js/views/diagram-tool.js).
   Theme colours only (Daylight, Lamplight, Quill & Ink). */

/* Diagram it on paper, then check */
.dg-paper .q-legend { font-weight: 700; font-size: 19px; margin: 0 0 10px; }
.dg-paper-list { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--card); color: var(--ink); }
.dg-paper-list summary { cursor: pointer; font-weight: 600; min-height: 32px; display: list-item; }
.dg-paper-list ul { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.dg-paper-part { display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; padding: 4px 0; cursor: pointer; }
.dg-paper-part input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.dg-paper-marks { border: 0; padding: 0; margin: 12px 0 0; }
.dg-paper-marks legend { font-weight: 600; margin-bottom: 8px; }
.dg-paper-marks .row { flex-wrap: wrap; gap: 8px; }
.feedback.neutral { background: var(--soft); border: 1px solid var(--border-strong, var(--border)); }
.feedback.neutral .head { color: var(--ink); }

/* Diagram a sentence (the reader) */
.dg-pick-on p[data-i] button.sentence { outline-offset: 2px; }
.dg-tool { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.dg-tool blockquote { margin: 0; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.dg-tool .dg-tool-warn { font-weight: 600; }
.dg-s { font: inherit; color: inherit; text-align: left; background: transparent; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--r-1); padding: 1px 3px; margin: 1px 0; cursor: pointer; display: inline; line-height: inherit; }
.dg-s:hover, .dg-s:focus-visible { background: var(--soft); border-style: solid; }
.dg-tool .dg-tool-h { margin: 0; font-size: 13px; letter-spacing: .08em; }