/* 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 {
  position: relative;
  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);
}

/* **On a phone, one row that scrolls sideways** (the fifth polish round; S11 of the polish crawl):
   an order's seven tabs wrapped onto two rows at 390 px, which read as two sets. One row keeps every
   tab one press away and the one showing in view (tabs.rs scrolls it there); a menu was the other
   form, and was not taken, since it hides which tabs there are behind a press. The row's own
   scrollbar is not drawn: the tab cut at the right edge says there is more. The row overlaps the
   hairline under it, so the showing tab's rule still sits on it, and the tabs' own overlap goes. */
@media (max-width: 36rem) {
  .tabs-list {
    flex-wrap: nowrap;
    gap: var(--space-5);
    min-width: 0;
    max-width: 100%;
    margin-bottom: calc(-1 * var(--hairline));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tabs-list::-webkit-scrollbar {
    display: none;
  }

  .tabs-list .tab {
    flex: none;
    margin-bottom: 0;
    white-space: nowrap;
  }
}