@layer components {
  .card {
    padding: var(--space-4); margin-block-end: var(--space-4);
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  }
  .card--narrow { max-width: 28rem; margin-inline: auto; }
  .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .card__header h2 { margin: 0; }
  .card__footer { margin-block-start: var(--space-4); text-align: center; color: var(--color-muted); }
  @media (min-width: 48rem) { .card { padding: var(--space-6); } }

  .flash {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); margin-block-end: var(--space-4); border-radius: var(--radius);
  }
  .flash--notice { background: var(--color-success-bg); color: var(--color-success); }
  .flash--alert { background: var(--color-danger-bg); color: var(--color-danger); }
  .flash__close {
    min-inline-size: var(--tap); min-block-size: var(--tap);
    border: 0; background: none; font-size: 1.25rem; cursor: pointer; color: inherit;
  }

  .notice-bar {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2);
    padding: var(--space-3); margin-block-end: var(--space-4); border-radius: var(--radius);
    background: var(--color-warning-bg); color: var(--color-warning);
  }

  .pill { display: inline-block; padding: 0.1rem var(--space-2); border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
  .pill--active { background: var(--color-success-bg); color: var(--color-success); }
  .pill--pending { background: var(--color-warning-bg); color: var(--color-warning); }
  .pill--suspended { background: var(--color-danger-bg); color: var(--color-danger); }

  .list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
  .list__item {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2);
    padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
  }

  .details { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
  .details dt { color: var(--color-muted); }

  .qr-code { max-width: 14rem; margin: var(--space-4) auto; background: #fff; padding: var(--space-2); }

  .filters { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .filters [aria-current="page"] { font-weight: 700; color: var(--color-ink); }

  .locale-picker { display: flex; gap: var(--space-2); }
  .company-switcher select { min-height: var(--tap); width: auto; }
}

@layer components {
  .pill--draft, .pill--withdrawn, .pill--declined, .pill--unfunded, .pill--cancelled, .pill--canceled, .pill--expired { background: var(--color-canvas); color: var(--color-muted); }
  .pill--open, .pill--submitted, .pill--funding { background: var(--color-warning-bg); color: var(--color-warning); }
  .pill--awarded, .pill--completed, .pill--funded, .pill--approved { background: var(--color-success-bg); color: var(--color-success); }
  .pill--emergency { background: var(--color-danger-bg); color: var(--color-danger); }

  /* Money: milestones and transfers */
  .pill--refunded, .pill--applied { background: var(--color-canvas); color: var(--color-muted); }
  .pill--in_progress, .pill--pending_signoff, .pill--held { background: var(--color-warning-bg); color: var(--color-warning); }
  .pill--settled, .pill--paid { background: var(--color-success-bg); color: var(--color-success); }
  .pill--disputed, .pill--failed, .pill--outstanding { background: var(--color-danger-bg); color: var(--color-danger); }

  .notice-bar--info { background: var(--color-success-bg); color: var(--color-success); }
  .actions--inline { margin: 0; align-items: center; }

  .prose { margin-block-end: var(--space-4); }
  .prose p + p { margin-block-start: var(--space-2); }

  .checkbox-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

  .media-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); margin-block-start: var(--space-4); }
  .media-grid img, .media-grid video { inline-size: 100%; border-radius: var(--radius); }

  /* Side-by-side bid comparison: equal cards, same fields in the same place. */
  .bid-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }
  .bid-card { display: grid; gap: var(--space-3); margin: 0; }
  .bid-card h3 { font-size: 1rem; margin: 0; }
  .bid-card__price { display: grid; margin: 0; }
  .bid-card__amount { font-size: 1.75rem; font-weight: 800; }

  .crew-card { display: grid; gap: var(--space-2); }
  .crew-card__name { font-size: 1.1rem; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; }
  .stats dt { font-size: 0.8rem; color: var(--color-muted); }
  .stats dd { font-weight: 700; margin: 0; }

  .milestone-list { display: grid; gap: var(--space-1); padding-inline-start: var(--space-6); }
  .milestone-list li span:last-child { float: inline-end; font-weight: 600; }

  .milestone-fields { display: grid; gap: var(--space-3); padding: var(--space-3); margin-block-end: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); }
  .bid-total { font-size: 1.1rem; }
}