/*
    The "fold" a detail page shares with its tabs: a header (title, meta line, actions, back link),
    a row of stat cards, and a tab strip underneath. DetailFoldLayout is the only thing that renders
    this markup — a tab page just fills in a DetailFoldContext and gets the same look for free.

    These class names started life duplicated per bespoke detail page in the Public tier's own
    app.less. They live here now so DetailFoldLayout can use them too.
*/
.build-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.build-stat {
  flex: 1 1 140px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  background: var(--og-panel);
}
.build-stat__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
}
.build-stat__value {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 600;
}
.build-stat__value--text {
  font-size: var(--text-base);
}
.build-stat__value--warn {
  color: var(--amber);
}
.build-stat__value--bad {
  color: var(--red);
}
.detail-fold {
  grid-column: 1 / -1;
  width: 100%;
}
.build-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.build-head h1 {
  margin: 0;
}
.build-head__sub {
  font-size: var(--text-sm);
  color: var(--mid);
}
.build-head__actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
}
.build-head__back {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--mint-dark);
}
.build-head__actions + .build-head__back {
  margin-left: 0;
}
.build-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.build-tabs .build-tab {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  box-shadow: none;
  color: var(--mid);
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
}
.build-tabs .build-tab--on {
  border-bottom-color: var(--primary-colour);
  color: var(--text-colour);
  font-weight: 600;
}
.build-tab__count {
  margin-left: 6px;
  padding: 0 6px;
  border-radius: var(--pill-radius);
  background: var(--mint);
  color: var(--white);
  font-size: 10px;
}