/* Mainline — shared components (T1.3, 26 Sept 2026). One button family, one
   chip, one status pill, used by both site.css and atlas.css (which does not
   load site.css, hence this third file). Import after tokens.css.
   Legacy class names (.cta-primary, .cta-secondary, .status-pill + status
   ids, .chip--tech/--segment/--programme) are kept as aliases so existing
   markup and the 2,947 generated pages need no change. */

/* ---------- Buttons ---------- */

.btn, .cta-primary, .cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:focus-visible, .cta-primary:focus-visible, .cta-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary, .cta-primary {
  color: var(--text-on-navy);
  background: var(--mainline-navy);
  border-color: var(--mainline-navy);
}
.btn-primary:hover, .btn-primary:focus-visible,
.cta-primary:hover, .cta-primary:focus-visible {
  background: var(--mainline-ink);
  border-color: var(--mainline-ink);
}

.btn-secondary, .cta-secondary {
  color: var(--mainline-navy);
  background: transparent;
  border-color: var(--mainline-navy);
}
.btn-secondary:hover, .btn-secondary:focus-visible,
.cta-secondary:hover, .cta-secondary:focus-visible {
  background: var(--surface);
}

.btn-quiet {
  padding-left: 2px;
  padding-right: 2px;
  min-height: auto;
  color: var(--mainline-navy);
  background: transparent;
}
.btn-quiet:hover, .btn-quiet:focus-visible {
  border-bottom-color: var(--accent);
}

.btn--sm {
  font-size: 13px;
  padding: 8px 12px;
  min-height: 36px;
  gap: 4px;
}

.btn[aria-disabled="true"] {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
  cursor: not-allowed;
}

/* ---------- Chip ---------- */
/* Neutral by default; a coloured 6px dot carries meaning, never the fill. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 999px;
}
.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--data-1);
}
.chip__dot--2 { background: var(--data-2); }
.chip__dot--3 { background: var(--data-3); }
.chip__dot--4 { background: var(--data-4); }
.chip__dot--5 { background: var(--data-5); }

/* Aliases — old modifier classes, neutral fill, colour moved to a ::before dot. */
.chip--tech { background: var(--border); color: var(--text); border: none; }
.chip--segment {
  background: var(--border);
  color: var(--text);
}
.chip--segment::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  /* --chip-color is still set inline per segment by ui.js; falls back to --data-4 */
  background: var(--chip-color, var(--data-4));
}
.chip--programme { background: var(--border); color: var(--text); border: none; }
.chip--programme::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--accent-text);
}
a.chip:hover { border-color: var(--accent); }

/* ---------- Status pill ---------- */
/* Fixed semantic palette (Design plan T1.3). JS still emits .status-pill
   status-<id>; those old ids are aliased onto the new .pill-- modifiers so
   ui.js needs no change. */

.pill, .status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  background: var(--border);
  color: var(--text);
}

.pill--open, .status-open {
  background: var(--mainline-navy);
  color: var(--text-on-navy);
  border-color: var(--mainline-navy);
}
.pill--prebid, .pill--upcoming, .status-pre_bid {
  background: transparent;
  color: var(--mainline-navy);
  border-color: var(--mainline-navy);
}
.pill--closed, .pill--awaiting, .status-bids_closed {
  background: var(--border);
  color: var(--text);
  border-color: var(--border);
}
.pill--retender, .status-retender {
  background: transparent;
  color: var(--accent-text);
  border-color: var(--accent-text);
}
.pill--awarded, .pill--execution, .status-awarded, .status-in_execution {
  background: var(--border);
  color: var(--text-muted);
  border-color: var(--border);
}
.pill--cancelled, .status-cancelled {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
  text-decoration: line-through;
}
.pill--planned, .status-planned {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}