/* 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);
}

/* **The designs table's rows at the artboards' density** (the polish crawl's "The rest of HQ"; the
   fifth polish round): rows were 105 px for a 72 px picture, the words alone on their first line
   with the rest of the row empty. In the table the picture is 56 px and the cells take the item
   rows' 8 px and sit in the middle, so a row is 72 px, as the order pages' item rows are. The
   design's own page keeps the larger picture. */
.hq-designs .data-table .design-thumbnail {
  width: 3.5rem;
  height: 3.5rem;
}

.hq-designs .data-table-cell {
  padding-block: var(--space-2);
  vertical-align: middle;
}