/* DesignerShelf (designer-shelf.js): the Designer's empty-state shelf and the editor's unit strip. Builds on the
   squares.css marks (.sq, .sq-done, .sq-progress, .sq-open, .sq-late, .sq-tip). Colours are theme tokens only; square
   corners throughout. */
.dsh-shelf { display: flex; flex-direction: column; gap: 20px; }
.dsh-stage { margin: 0; }
.dsh-stage-h {
  margin: 0 0 8px; padding: 4px 8px; font-size: 0.9375rem; font-weight: 700; color: var(--th-text);
  background: var(--th-grad-eyebrow, transparent); border-radius: 0;
}
.dsh-num, .dsh-count { font-family: 'DM Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.dsh-stage-h .dsh-num { font-weight: 500; color: var(--th-text-2); margin-left: 4px; }

/* A certification square: big enough to hold its unit count. */
.dsh-strip { --sq-size: 44px; --sq-gap: 8px; }
.dsh-cert { border-width: 2px; display: inline-flex; align-items: center; justify-content: center; }
/* The count sits on a surface chip so it reads on every fill. */
.dsh-count:not(:empty) {
  min-width: 22px; padding: 1px 3px; font-size: 13px; line-height: 1.2; text-align: center;
  background: var(--th-surface); color: var(--th-text); border: 1px solid var(--th-border); border-radius: 0;
}
.dsh-cert.dsh-on { outline: 2px solid var(--th-text); outline-offset: 2px; }

/* Review overdue: a hatched corner on top of the state mark. */
.dsh-overdue::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 40%; height: 40%;
  background: repeating-linear-gradient(135deg, var(--th-bad) 0 2px, var(--th-bad-tint) 2px 4px);
  clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none;
}
.dsh-legend .dsh-overdue::after { top: -1.5px; right: -1.5px; width: 60%; height: 60%; }

/* The tip: label and value pairs. */
.dsh-tip { gap: 3px; }
.dsh-fact { display: flex; gap: 8px; }
.dsh-k { color: var(--th-text-3); min-width: 6ch; }
.dsh-v { color: var(--th-text); }
.dsh-num.dsh-v { font-family: 'DM Mono', ui-monospace, monospace; }
.dsh-late-word { color: var(--th-bad); font-weight: 600; }

/* The unit strip above Units. */
.dsh-units { --sq-size: 16px; --sq-gap: 4px; margin: 0 0 12px; }
.dsh-unit.dsh-on { outline: 2px solid var(--th-text); outline-offset: 2px; }
.dsh-problem { color: var(--th-bad); white-space: normal; }
.dsh-units .sq-tip { white-space: normal; min-width: 18ch; }

.dsh-empty { margin: 0; color: var(--th-text-2); font-size: 0.875rem; }