/* Tabs: the Spec's tab row (sheets 1b, 1c). The words in the interface face at the control's
   weight, a hairline under the row, and under the tab that is showing a rule in ink that sits over
   the hairline. A count after a word is quiet; a staged count is a filled square in the mono face,
   because filled is staged and a square is cut. Whatever belongs at the row's far end sits there,
   quiet, on the same baseline. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2) var(--space-6);
  padding: 0 var(--space-1);
  border-bottom: var(--hairline) solid var(--color-line);
}

.tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: calc(-1 * var(--hairline));
  padding: 0 0 var(--space-3);
  border: none;
  border-bottom: var(--rule-tab) solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.tab:hover {
  color: var(--color-ink);
}

.tab[aria-pressed="true"],
.tab[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.tab:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

.tab-count {
  color: var(--color-muted);
  font-weight: var(--weight-regular);
}

.tab-staged {
  padding: var(--chip-padding);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-medium);
  line-height: 1;
}

/* A count of checks forced, hatched as a forced check is on the line (progress-line.css), the
   number on it in the mono face. */
.tab-forced {
  padding: var(--chip-padding);
  border: 1px solid var(--color-ink);
  background: repeating-linear-gradient(
    135deg,
    var(--color-shell) 0 2px,
    var(--color-line-hatch) 2px 4px
  );
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.tabs-end {
  padding: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-label);
}

.tabs-end > * {
  margin: 0;
}

/* A dot after the word: something on the tab waits to be read, as a conversation whose last word is
   the customer's (docs/decisions.md, 10 Oct 2026, "The conversation on both order pages", (4)). */
.tab-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--color-ink);
}