/* Operator composition. Workspace geometry and visual language live in the shared design system. */
.skip-link { background: var(--color-primary); color: var(--color-on-primary); left: var(--space-4); padding: var(--space-3) var(--space-4); position: fixed; top: calc(var(--space-20) * -1); z-index: var(--layer-skip-link); }
.skip-link:focus { top: var(--space-4); }

.queue-card > .bento-card__title,
.access-card > .bento-card__title { margin-bottom: var(--space-2); }
.queue-card > .bento-card__body,
.access-card > .bento-card__body { margin-bottom: var(--space-5); }
.queue-card > .notice { margin: 0 0 var(--space-5); min-height: var(--space-5); }
.application-list, .shipment-list { display: grid; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); }
.product-list { display: grid; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); }
.operator-stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-5); }
.operator-stat { background: var(--color-surface-container); border: var(--border-width) solid var(--color-outline-variant); border-radius: var(--shape-small); display: grid; gap: var(--space-2); padding: var(--space-4); }
.operator-stat strong { font: var(--type-headline-small); overflow-wrap: anywhere; }

.application-card {
  background: var(--color-surface-container);
  border: var(--border-width) solid var(--color-outline-variant);
  border-radius: var(--shape-small);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-4);
}

.application-card p { margin: 0; }
.product-description { color: var(--color-on-surface-variant); grid-column: 1 / -1; line-height: 1.5; white-space: pre-wrap; }
.application-card strong, .shipment-card strong { display: block; font: var(--type-title-medium); margin-top: var(--space-1); overflow-wrap: anywhere; }
.detail-label { color: var(--color-on-surface-variant); display: block; font: var(--type-label-medium); }
.decision-form { border-top: var(--border-width) solid var(--color-outline-variant); display: grid; gap: var(--space-4); grid-column: 1 / -1; margin-top: var(--space-2); padding-top: var(--space-4); }
.decision-form .button { justify-self: start; }
.decision-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.invitation-output { background: var(--color-surface-container-high); border-radius: var(--shape-small); display: grid; gap: var(--space-3); padding: var(--space-4); }
.invitation-output[hidden] { display: none; }

.assignment-search, .assignment-form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.assignment-search { border-bottom: var(--border-width) solid var(--color-outline-variant); padding-bottom: var(--space-5); }
.assignment-search .button { justify-self: start; }
.assignment-form .notice { margin: 0; min-height: var(--space-5); }
.assignment-form .button { justify-self: start; }
.order-selection-detail { background: var(--color-surface-container); border: var(--border-width) solid var(--color-outline-variant); border-radius: var(--shape-small); display: grid; gap: var(--space-2); padding: var(--space-4); }
.order-selection-detail ul { display: grid; gap: var(--space-1); list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.order-selection-detail li { color: var(--color-on-surface-variant); font: var(--type-body-medium); }
.order-selection-detail strong { font: var(--type-body-medium); }

.operator-boundaries ol { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-5) 0 0; padding-left: var(--space-5); }
.operator-boundaries li { font: var(--type-body-medium); padding-left: var(--space-2); }

@media (max-width: 52rem) {
  .operator-grid > .bento-card--wide,
  .operator-grid > .bento-card--narrow { grid-column: span 6; }
  .operator-boundaries ol { grid-template-columns: 1fr; }
  .operator-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 35rem) {
  .application-card { grid-template-columns: 1fr; }
  .decision-form { grid-column: 1; }
  .operator-stats { grid-template-columns: 1fr; }
}