/* Status badges: small pills. Colour says the state; the words say it too. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .badge {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .1rem .6rem; border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
    background: var(--glass-strong); border: 1px solid var(--line); color: var(--ink-soft);
  }
  .badge::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; opacity: .8; }
  .badge--approved, .badge--ready { color: var(--positive); }
  .badge--awaiting-approval, .badge--waiting { color: var(--warning); }
  .badge--changes-requested { color: var(--negative); }
  .badge--in-production { color: var(--info); }
  .badge--superseded, .badge--completed, .badge--not-started { color: var(--muted); }

  /* The sample button: a badge you can click (Sample to Make → Sent → Approved → Returned). */
  button.sample-button { cursor: pointer; font-family: inherit; line-height: inherit; }
  button.sample-button:hover { border-color: currentColor; }
  .badge--approved.sample-button:is(button) { background: color-mix(in srgb, var(--positive) 12%, var(--glass-strong)); }
  .sample-round-menu { display: inline-block; position: relative; }
  .sample-round-menu > summary { cursor: pointer; list-style: none; }
  .sample-round-menu > summary::-webkit-details-marker { display: none; }
  .sample-round-options { position: absolute; z-index: 5; margin-top: var(--space-1); padding: var(--space-2); display: grid; gap: var(--space-1);
                          background: var(--solid); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
  .ticket-samples { margin-block: var(--space-4); }
  .ticket-sample { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-block: var(--space-2); }
  .ticket-sample p { flex-basis: 100%; margin: 0; }
}