/* Job tickets: on screen, and printed for the shop floor. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .ticket-header { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; align-items: flex-start; }
  .ticket-header h1 { margin-top: var(--space-1); }
  .ticket-facts { display: grid; grid-template-columns: auto auto; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0; font-size: var(--text-sm); }
  .ticket-facts dt { color: var(--muted); }
  .ticket-proofs { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .ticket-proofs figcaption { font-size: var(--text-sm); }
  .ticket-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
  .ticket-actions form { display: inline-flex; }
}

@layer components {
  /* Production steps by department. */
  .step-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .step-group header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
  .step-group h3 { margin: 0 0 var(--space-2); }
  .step-list { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
  .step-list li { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
  .step-list li:last-child { border-bottom: none; }
  .step-check { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--line);
                font-size: .75rem; color: var(--action-ink); flex: none; }
  .step--done .step-check { background: var(--positive); border-color: var(--positive); }
  /* The circle is the control: click to tick, click a tick to untick. */
  .step-list form.button_to { display: inline-flex; }
  .step-check--button { padding: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--ink-soft);
                        background: var(--field); color: var(--action-ink); font-size: .75rem; line-height: 1; cursor: pointer; }
  .step-check--button:hover { border-color: var(--positive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--positive) 25%, transparent);
                              background: var(--field); }
  .step--done .step-check--button { background: var(--positive); border-color: var(--positive); }
  .step--done .step-check--button:hover { background: var(--positive); }
  .step-remove { margin-left: auto; }
  .step--done .step-name { color: var(--muted); }
  .step-list form { display: inline-flex; }
  .step-list small { margin-right: auto; }
  .add-step { margin-top: var(--space-4); }
}

@layer components {
  /* QR codes for station pages, and the station page itself (phones first). */
  .station-qr { margin: 0; text-align: center; }
  .station-qr .qr-code { width: 5.5rem; height: 5.5rem; border-radius: 6px; }
  .station-qr figcaption { font-size: var(--text-xs); }
  .station { max-width: 36rem; margin-inline: auto; }
  .station-header h1 { margin-top: var(--space-1); }
  .station .placement-preview { margin-bottom: var(--space-3); }
  /* Blurred until a floor worker enters their name and PIN. */
  .station--locked { filter: blur(8px); pointer-events: none; user-select: none; }
  .station-gate { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--space-4); }
  .station-gate-card { width: min(100%, 22rem); }
  .station-gate-card h2 { margin-top: var(--space-1); }
  .station-worker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
  /* Bigger circles for thumbs. */
  .station-steps .step-check, .station-steps .step-check--button { width: 1.75rem; height: 1.75rem; font-size: var(--text-md); }
  .station-steps li { padding-block: var(--space-2); font-size: var(--text-md); }
  .station-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
  .station-section { scroll-margin-top: 5rem; }
  .production-header { align-items: flex-start; }
}