@scope (.work-order-form) {
  :scope {
    --work-order-ticket: var(--color-primary-muted);
    --work-order-ticket-edge: var(--color-primary);
    container-type: inline-size;
    max-width: none;
  }

  .work-order-form__layout {
    display: grid;
    gap: var(--space-xl);
    grid-template-areas:
      "service"
      "ticket"
      "notes"
      "ficha";
  }

  .work-order-form__service { grid-area: service; }
  .work-order-form__ticket { grid-area: ticket; }
  .work-order-form__notes { grid-area: notes; }
  .work-order-form__ficha { grid-area: ficha; }

  .work-order-form__section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin-bottom: var(--space-md);
  }

  .work-order-form__eyebrow {
    font-size: var(--text-caption);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .work-order-form__section-title {
    font-size: var(--text-heading-5);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
  }

  .work-order-form__hint {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    max-width: 36rem;
  }

  .work-order-form__ticket {
    padding: var(--space-lg);
    background: var(--work-order-ticket);
    border: 1px solid color-mix(in oklab, var(--work-order-ticket-edge) 28%, var(--color-border));
    border-inline-start: 0.35rem solid var(--work-order-ticket-edge);
    border-radius: var(--radius-lg);
  }

  .work-order-form__ticket .form-field__input {
    background: var(--color-surface);
  }

  .work-order-form__ticket-input {
    font-family: var(--font-mono);
    font-size: var(--text-heading-4);
    font-weight: var(--font-semibold);
    letter-spacing: 0.06em;
    min-height: 3.25rem;
  }

  .work-order-form__unlock {
    --_height: 2.25rem;
    margin-top: var(--space-xs);
    font-size: var(--text-body-sm);
  }

  :scope.work-order-form--filled .work-order-form__unlock,
  :scope.work-order-form--unlocked .work-order-form__unlock {
    display: none;
  }

  .work-order-form__ficha {
    padding: var(--space-lg);
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .work-order-form__ficha-body {
    position: relative;
  }

  .work-order-form__ficha-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: color-mix(in oklab, var(--color-surface-muted) 88%, transparent);
    border-radius: var(--radius-lg);
  }

  :scope.work-order-form--loading .work-order-form__ficha-loading {
    display: flex;
  }

  .work-order-form__ficha-loading-label {
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
  }

  .work-order-form__skeleton {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .work-order-form__skeleton-bar {
    display: block;
    height: 2.85rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(
      90deg,
      var(--color-border-muted) 0%,
      var(--color-surface) 45%,
      var(--color-border-muted) 90%
    );
    background-size: 200% 100%;
    animation: work-order-ficha-shimmer 1.1s ease-in-out infinite;
  }

  .work-order-form__skeleton-bar--wide {
    grid-column: 1 / -1;
  }

  :scope.work-order-form--loading .work-order-form__ficha .form__fields {
    opacity: 0.35;
    pointer-events: none;
  }

  :scope.work-order-form--filled .work-order-form__ficha {
    border-style: solid;
    background: var(--color-surface);
  }

  :scope.work-order-form--locked .work-order-form__ficha .form-field__input:read-only,
  :scope.work-order-form--locked .work-order-form__ficha .form-field__input[aria-readonly="true"] {
    color: var(--color-text-secondary);
    cursor: default;
  }

  :scope.work-order-form--locked .work-order-form__ficha select.form-field__input {
    pointer-events: none;
  }

  @container (width >= 52rem) {
    .work-order-form__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      grid-template-areas:
        "service ficha"
        "ticket  ficha"
        "notes   ficha";
      align-items: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .work-order-form__ficha {
      transition: none;
    }

    .work-order-form__skeleton-bar {
      animation: none;
      background: var(--color-border-muted);
    }
  }
}

@keyframes work-order-ficha-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}