/* The designs wing's own spacing: what is not the component set's. Every rule is scoped to
   `.hq-designs`, the wrapper this wing's pages render, so nothing here reaches a class a shell or
   another page owns. Tokens only. Functional first: the design pass restyles these pages. */

.hq-designs .back {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

/* All designs and the shelf, as two links over the page. */
.hq-designs .designs-tabs {
  display: flex;
  gap: var(--space-6);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

.hq-designs .designs-tabs a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--rule-tab) solid var(--color-ink);
}

/* **The shelf's cards wide enough for their one button.** The shelf's own page says "Start a design
   from this", about 178 px as a small button, where the sheet over an item says "Use this"; the
   component's 9rem columns left the page's button 146 px wide and its last letters past its border
   (the D3 verification). Wider columns here, on the page alone, keep the button's one line and fixed
   height. */
.hq-designs .shelf-cards {
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}

/* **The three fields on one line, their controls on one baseline.** `flex-end` lined up the boxes'
   bottom edges, and the Find box carries a hint under it where the two selects carry none, so its
   control sat a line higher than theirs (Reed, 8 Oct 2026). `start` lines up the labels instead;
   every control is `--control-height` under a one-line label, so they land on the same baseline and
   a hint hangs below without moving anything. */
.hq-designs .designs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}

/* A button that reads as a link: the copy in a table row, a start on the shelf. */
.hq-designs .designs-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

/* The picture drawn of a version, or a quiet box saying it is being drawn or could not be. */
.hq-designs .design-thumbnail {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  border: var(--hairline) solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.hq-designs .design-thumbnail-none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: var(--text-label);
  text-align: center;
}

/* A version the worker could not draw: the reason is on hover, and on the record beside it. */
.hq-designs .design-thumbnail-not-drawn {
  border-style: dashed;
}

.hq-designs .design-section {
  margin: var(--space-6) 0;
}

.hq-designs .design-versions,
.hq-designs .pool,
.hq-designs .found,
.hq-designs .design-acts,
.hq-designs .design-orders {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hq-designs .design-version,
.hq-designs .pool-entry,
.hq-designs .found li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}

.hq-designs .design-version p,
.hq-designs .pool-entry p {
  margin: 0;
}

.hq-designs .pool-entry-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.hq-designs .add-an-option {
  display: grid;
  gap: var(--space-3);
  max-width: 36rem;
  margin-top: var(--space-3);
}

.hq-designs .set-aside {
  margin-top: var(--space-3);
  color: var(--color-muted);
}

.hq-designs .design-act-when {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.hq-designs .design-pictures {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hq-designs .design-picture {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line);
}