/* Styles for diagram.js (this app only). Uses the kit's colour tokens. */
.dg-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 6px; padding: 6px; }
.dg-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.dg-svg { flex: 1 1 auto; min-height: 0; width: 100%; display: block; touch-action: none; overflow: visible;
  -webkit-user-select: none; user-select: none; }
.dg-foot { flex: none; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; font-size: 12.5px; line-height: 1.3;
  padding: 2px 4px 0; color: var(--ink); }
.dg-foot:empty { display: none; }
.dg-note { font-variant-numeric: tabular-nums; font-weight: 600; }
.dg-note:empty, .dg-key:empty { display: none; }
.dg-key { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); }
.dg-key-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dg-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.dg-swatch.is-line { height: 3px; border-radius: 0; }

.dg-axis { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.dg-axis-label { fill: var(--ink); font-weight: 600; font-family: var(--font); }
.dg-tick { fill: var(--muted); font-family: var(--font); font-variant-numeric: tabular-nums; }
.dg-tick.dg-named { font-weight: 700; }
.dg-curve { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dg-guide { fill: none; stroke-width: 1; stroke-dasharray: 3 3; }
.dg-area { stroke: none; }
.dg-arrow line { stroke: currentColor; stroke-width: 2; }
.dg-arrow polygon { fill: currentColor; }
.dg-label { font-family: var(--font); paint-order: stroke; stroke: var(--stage); stroke-width: 3px; stroke-linejoin: round; }
.dg-label.is-bold { font-weight: 700; }
.dg-dot { stroke: var(--stage); stroke-width: 1.5; }

.dg-handle { cursor: grab; outline: none; touch-action: none; }
.dg-handle.is-drag { cursor: grabbing; }
.dg-hit { fill: transparent; }
.dg-ring { fill: var(--card); stroke-width: 3; }
.dg-handle:hover .dg-ring, .dg-handle.is-drag .dg-ring { r: 11px; }
.dg-handle:focus-visible .dg-ring { stroke: var(--focus) !important; stroke-width: 4; r: 11px; }

/* two-by-two sorter (public goods) and small HTML panels inside the stage */
.dg-html { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px; font-size: 14px; }
.dg-sort { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px; }
.dg-sort .dg-head { font-weight: 700; font-size: 12.5px; color: var(--muted); align-self: end; text-align: center; }
.dg-sort .dg-side { font-weight: 700; font-size: 12.5px; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.dg-cell { min-height: 64px; border: 2px dashed var(--line); border-radius: 8px; background: var(--card); padding: 4px; text-align: left;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; color: inherit; }
.dg-cell:hover { border-color: var(--accent); }
.dg-cell b { font-size: 12px; color: var(--muted); }
.dg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.dg-chip { min-height: var(--tap); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.dg-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.dg-chip.is-placed { opacity: .55; }
.dg-tag { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--bg); }
.dg-tag.is-right { background: var(--correct-soft); }
.dg-msg { font-size: 13px; margin-top: 6px; min-height: 1.3em; }
.dg-rank { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.dg-rank li { display: grid; grid-template-columns: 5.5em 1fr 3.5em; gap: 6px; align-items: center; }
.dg-rank .dg-barwrap { background: var(--bg); border-radius: 3px; height: 10px; }
.dg-rank .dg-barfill { background: var(--s1); height: 10px; border-radius: 3px; }
.dg-lag { display: flex; gap: 4px; font-size: 12px; }
.dg-lag span { flex: 1; text-align: center; padding: 2px 4px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.dg-lag span.is-on { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
@media (max-width: 760px) { .dg-foot { font-size: 11.5px; } }