/* Order requests: the brand's picker for spec sheets and artwork, and the
 * "Your orders" progress line on the brand home page. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
  .pick-list li { display: flex; align-items: center; gap: var(--space-2); }

  .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-3); }
  .pick-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-1); cursor: pointer; font-weight: var(--weight-regular); }
  .pick-tile input { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1; }
  .pick-tile:has(input:checked) .artwork-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
  .pick-name { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .order-row { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: var(--space-3);
               padding-block: var(--space-3); border-top: 1px solid var(--line); }
  .order-row:first-of-type { border-top: none; }
  .order-row .workflow-job a { font-weight: var(--weight-medium); }
  @media (max-width: 40rem) { .order-row { grid-template-columns: 1fr; } }

  .home-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); margin-block: var(--space-4); }
  .home-action { display: flex; flex-direction: column; gap: var(--space-1); text-decoration: none; color: var(--ink); }
  .home-action strong { font-size: var(--text-lg); font-weight: var(--weight-medium); }
  .home-action span { color: var(--ink-soft); font-size: var(--text-sm); }
}